Destacando el potencial de Universal Analytics, Google ha anunciado que estará disponible para todos sus usuarior de Analytics. Universal Analytics permite conocer cual es la interacción que tienen los usuarios con una web con independencia se si el acceso es a través de varios dispositivos o aplicaciones para móvil.

Después de un periodo de pruebas en el que Universal Analytics estuvo disponible para un grupo controlado de clientes de Analytics, Google ha decidido abrirlo a todos los usuarios, pasando a ser una beta pública.

En el siguiente video se muestra un ejemplo de la utilización de Universal Analytics por parte de una empresa (EN)

Google intenta responder a la necesidad por parte de las empresas de monitorizar las interacciones de los usuarios con su página web, teniendo en cuenta que hoy en día estos accesos se producen desde varios dispositivos. Además esta herramienta destaca al ofrecer informes de accesos desde dispositivos móviles, permitiendo obtener un retorno mejor de las inversiones de la empresa en esos dispositivos.

Un paso más en el interesante desarrollo de esta herramienta.

Más información en el blog de Analytics (EN).

Cada día crece el numero de usuarios que accede al contenido que se ofrece en Internet desde dispositivos móviles. Es previsible que para el año 2015 los  usuarios de Internet móviles sean más que los que acceden vía ordenadores de escritorio.

Por eso es importante que la información de tu empresa esté en Internet de la forma más optimizada y accesible posible. Sin embargo todavía existe un debate sobre cuál de los tres métodos descritos a continuación es mejor: diseño responsive, versión web específica para móviles o una aplicación móvil.

Diseño web Responsive

Se llama Responsive al diseño web que mediante la maquetación HTML y CSS3 permite que el contenido de la página web se adapte al dispositivo teniendo en cuenta factores como el tamaño de pantalla, orientación o plataforma. De esta manera el mismo documento HTML se utiliza para ver el contenido adaptado a dispositivos tan diferentes como Tabletas, Móviles, Ordenadores de escritorio o SmartTV.

Ventajas del diseño web Responsive

• Menores costos, sólo se desarrolla y mantiene un sitio web
• Consistencia. El contenido es común y único para todos los dispositivos
• URL/Dominio únicos, no son necesarios redireccionamientos

Desventajas

• Contenidos no optimizados totalmente. A menos que se haga un trabajo específico, los contenidos no suelen estar totalmente optimizados para móviles
• Rendimiento más lento. Las versiones móviles responsive tienen el mismo tamaño de archivos que las de escritorio
• Problemas de usabilidad. Los usuarios suelen tender a realizar diferentes tareas como lo harían en sus versiones escritorio

Versión para móviles del Sitio Web

Son versiones de la página web, generalmente colocadas en un subdominio o redirección a las que se accede cuando el  usuario utiliza el dispositivo móvil para visitar una web.

Ventajas de una versión separada para móvil de un sitioweb

• Contenidos a medida. Se puede ofrecer contenido específico para cada dispositivo.
• Velocidad. Permite optimizar y racionalizar el sitio para los usuarios móviles
• Rápido desarrollo. Al existir una versión escritorio, el desarrollo de la versión móvil generalmente es muy rápido

Desventajas

• SEO. Al tener múltiples dominios o URL puede generar problemas o dificultades en el trabajo del SEO
• Trabajo duplicado. Al tener que mantener dos sitios diferenciados.

Aplicación Móvil

Las aplicaciones móviles se instalan en los dispositivos móviles y permiten acceder a todas las funcionalidades del dispositivo.

Ventajas de las aplicaciones móviles

• Rapidez. Se cargan en segundos y son más rápidas que las WebApps o los sitios web dedicados.
• Disponibilidad off-line. No requieren estar conectado para acceder a su contenido
• Características móviles nativas. Las Mobile Apps permiten acceder a las funcionalidades del dispositivo móvil como GPS o la cámara de fotos

Desventajas

• Descarga requerida. La descarga de las aplicaciones es necesaria
• Mantenimiento. Requieren un mantenimiento para adaptarse a los cambios del sistema operativo
• Versión para cada plataforma. Es necesario realizar un desarrollo para cada plataforma móvil: iPhone, iPad, Android…

Además de la distribución clásica en el Apple Store de una app, tenemos la posibilidad para empresas de que:

• Tener un canal propio con apps sugeridas
• Realizar compras masivas para obtener descuentos
• Limitar la distribución de una determinada app de manera privada y limitada

Estas funcionalidades se pueden realizar desde Apple Store Volume Purchasing for Business http://www.apple.com/business/vpp/ donde deberemos asignarle a un Apple ID dicha funcionalidad teniendo disponibles algunas de las funcionalidades de un MDM (Mobile Device Management http://es.wikipedia.org/wiki/Mobile_device_management)

Canal propio con apps sugeridas

En este lugar asignaremos las apps que sean sugeridas para el uso dentro de un entorno corporativo, hayan sido comprada su licencia en un gran volumen o sean de distribución privada, para que dentro del Apple Store podamos descargarlas fácilmente.

Compras masivas de apps para obtener descuentos

Si nuestra intención es realizar una compra masiva de licencias de la misma app, los usuarios de nuestra empresa podrán beneficiarse del descuento a través de una serie de códigos (redemption codes) que se distribuirán por email o a través de una Intranet corporativa.

Distribución privada de apps iOS

Esta modalidad merece mención aparte ya que si una empresa de programación de apps nos desarrolla una aplicación que no debe ser pública, si no de uso interno B2B, tendremos varios métodos para hacerlo:

• Ad Hoc: sólo para test, certificado válido durante un año
• Enterprise program: las actualizaciones no son automáticas, si no que se distribuye a través de un fichero descargable
• Volume Purchasing for Business: la app se publicará a través de iTunes con normalidad, pero restringiendo su uso a una determinada cuenta que esté dentro de este programa.

Esta modalidad nos permite que determinadas apps sean de uso interno para empresas, eventos o para un testing distribuido entre múltiples usuarios.

Entrada relacionadas:

Como subir un app al Apple Store

Open Data, o lo que es lo mismo Datos Abiertos, es una filosofía cuyo objetivo es poner a disposición de la sociedad los datos que gestiona la administración pública. Estos datos deben ofrecerse en formatos de fácil manipulación por parte de los usuarios. Está basado en la reutilización de los datos, generando servicios y riqueza para toda la sociedad ya que las empresas y ciudadanos pueden analizar, gestionar y redistribuir estos datos. Además, la adminstración pública progresa en transparencia "gobierno abierto" y gestiona inteligentemente los recursos "gobierno inteligente".

Uno de los objetivos por tanto es que los ciudadanos y las empresas reaprovechen los datos para generar riqueza económica que aporte beneficios a la socidad generando nuevos servicios. A las personas o empresas que lo hacen se les llama infomediarios o reutilizadores.

Un término similar al Open Data es RISP (Reutilización de la Información del Sector Público). La diferencia estriba en que mientras los datos ofrecidos mediante Open Data deben ser siempre gratuitos y en formatos fácilmente manipulables, RISP contempla la posibilidad del pago por el uso de los datos y su publicación admite cualquier formato.

Open Data implica una serie de principios de obligado cumplimiento, en otro caso no estaríamos hablando de Open Data:

• La única restricción para su publicación deben ser los datos sujetos a restricciones de privacidad, seguridad o derechos de autor. No deben existir otras trabas por parte de la administración pública para su publicación
• No se deben procesar los datos, hay que publicarlos como datos en bruto, tal y como están en origen.
• Deben ser fieles a la actualidad y por lo tanto se deben ofrecer con la obligada frecuencia para que no pierdan valor.
• No deberían existir restricciones en cuanto a los usuarios que los van a recibir, ni por su propósito de uso.
• La estructura de los datos debe permitir un proceso automático por un ordenador.
• La disposición de los datos no puede requerir un registro previo. Deben ser libres.
• El formato de los datos puestos a disposición no puede depender de una entidad o herramienta propietaria de una entidad. El formato debe ser abierto como lo son CSV, XML...
• No existirán patentes, copyright, derechos sobre los datos, deben ser de uso 100% libre ni estar sujetos a derechos de privacidad, seguridad o privilegios.

Conjunto de datos o Dataset. Éste término hace referencia a la categorización de los datos públicos mediante catálogos de datos. Esto permite que se puedan indexar y localizar más fácilmente.

Los principales formatos para los datos públicos son:

• CSV, Valores separados por comas, es un documento de texto plano que presenta datos tabulados. Una hoja de cálculo Excel es fácilmente exportable a este formato.
• XML, Lenguaje etiquetado extensible, metalenguaje que permite la interpretación de datos para otros lenguajes más complejos. Las bases de datos suelen permitr su exportación a XML.
• RDF, Infraestructura para descripción de recursos, está basado en XML y permite intercambiar y enlazar a través de aplicaciones, datos y recursos. Facilita su reutilización y enriquecimiento.
• RSS, Sindicación realmente sencilla, también basado en XML, se utiliza para la ordenación de contenidos de sitios web que tienen una actualización frecuente.
• ODATA, Open data Protocol, protocolo abierto, permite consultar y seleccionar directamente sobre los datos y descargar el resultado.

La sociedad en su conjunto se beneficia de la reutilización de los datos que el sector público dispone. Así, la Ley 37/2007 dice "la información generada desde las instancias públicas, con la potencialidad que le otorga el desarrollo de la sociedad de la información, tiene un gran interés para las empresas a la hora de operar en sus ámbitos de actuación, contribuir al crecimiento económico y a la creación de empleo, y para los ciudadanos como elemento de transparencia y guía para la participación democrática".

El desarrollo del Open Data ofrece como principales beneficios los siguientes:

Para el ciudadano: la utilización de los datos públicos puede dar lugar a nuevas aplicaciones y servicios que mejoren la vida de los ciudadanos, además de la generación de nuevos puestos de trabajo. Se mejora en gran medida la transparencia de la administración pública con lo que se está más cerca de conseguir el objetivo de gobierno abierto e inteligente que está en permanente comunicación con el ciudadano y facilita su participación.

Para las empresas: Pueden generar valor económico derivado de la utilización de los datos públicos puestos a su disposición. También se fomenta la competitividad entre empresas al ofrecer la posibilidad de traducir en beneficio económico esa información.

Para la administración pública: Dinamiza la economía al permitir a las empresas infomediarias el desarrollo de aplicaciones que de otra manera serían bastante costosas. También la colaboración de los ciudadanos mediante la creación de nuevas iniciativas y aplicaciones derivadas del uso de estos datos supone un beneficio para la administración. Otro aspecto positivo es el intercambio de datos entre las administraciones local, autonómica y central.

Hay ocasiones en las que queremos que ninguna persona o robot (google...) acceda a una página, dominio o subdominio. Donde el motivo más común suele ser porque se trata de una página o sitio de desarrollo y no nos interesa que se indexe el contenido, o que personas ajenas al equipo de desarrollo accedan.

Para llevar a cabo este cometido, vamos a configurar el servidor de Apache mediante el htaccess de nuestro sitio principal. La idea es denegar todas las peticiones al sitio que queremos mantener en privado y permitir el acceso a este mediante autorización. Vamos a ver un ejemplo donde tenemos el subdominio desarrollo del dominio imaginanet.com

SetEnvIfNoCase Host ^(www.)imaginanet.com$ imaginanet
SetEnvIfNoCase Host ^(desarrollo.)imaginanet.com$ desarrollo

AuthType basic
AuthName "Desarrollo"
AuthUserFile /home/imaginanet/.htpasswd

Order deny,allow
Deny from all
Allow from env=imaginanet
Require valid-user
Satisfy any

En las primeras líneas estamos inicializando variables de entorno para poder realizar las reglas. En este caso la regla imaginanet para nuestro dominio principal y la regla desarrollo para el subdominio de desarrollo.

Lo siguiente es solicitar autorización básica pidiendo el usuario y contraseña que tenemos almacenados en el archivo .htpasswd. Este archivo conviene almacenarlo fuera de la carpeta pública, y se debe poner la ruta absoluta. El contenido del archivo tiene que ser un usuario y contraseña, o más. Y la contraseña debe ir encriptada. Podemos encontrar conversores online para hacerlo, o si disponemos de acceso ssh al servidor entonces podemos ejecutar el siguiente comando:

htpasswd -nb usuario contraseña

Este comando nos devuelve lo que debemos incluir en el fichero .htpasswd

Finalmente denegamos todas las peticiones y requerimos validación, con la excepción de imaginanet que permitimos su acceso sin autorización.

Cuando una página web contiene un listado con un número grande de elementos que mostrar es necesario establecer una paginación que ayude a la correcta visualización y accesibilidad de dichos elementos. Por otra parte, hay páginas que aunque ocupen gran espacio en sentido vertical, no pueden dividirse en varias páginas al ser artículos de información o consulta.

La paginación es un mal necesario y a la vez muy útil en páginas donde se muestran productos o artículos para el comercio electrónico y también para las páginas de resultados de una búsqueda. El objetivo de estas páginas para el usuario es encontrar un artículo específico, no leer la lista completa. Por ello se suele priorizar los elementos de la lista colocando los más vistos o interesantes en la parte superior. A partir de aquí se suele establecer la paginación para no tener listados demasiado largos.

Un factor a tener muy en cuenta es el botón Ver todos. En diversas pruebas se ha observado que el poner a disposición de los usuarios este botón permite a muchos ver el listado completo sin la a veces engorrosa tarea de ir hacia adelante y hacia atrás en las páginas. Está demostrado que la disponibilidad de este botón como una opción más del listado no molesta en la experiencia del usuario (usabilidad), y sin embargo si no se ofrece esta opción, hay usuarios que la echarán en falta.

Además el botón Ver todos es muy útil para listados difícilmente clasificables en cuanto al rango de importancia de sus artículos, ya que listados paginados tienden a ocultar verdaderas joyas en las últimas páginas.

Por otra parte hay que tener en cuenta que a pesar de este botón conviene no ir a listados de más de 100 artículos, tanto por la cacpacidad de retener del propio usuario como del tiempo de carga de la página.

Existe también la opción de ofrecer al usuario la cantidad de artículos que desea ver por listado (acotado entre varias posibilidades), aspecto que ofrece una mayor sensación de control de lo que está viendo al propio usuario, aunque suele ser mejor ofrecer algo más acotado complementado con el botón Ver todos.

En estos casos en que se permite una cierta personalización, sería importante que el propio sitio web fuera capaz de "recordar" la elección del usuario para que la siguiente vez que nos visite no tenga que volver a elegir.

Finalmente, las investigaciones sobre este particular han demostrado lo siguiente:

- La mayor parte de los usuarios no desean personalizar y prefieren utilizar la configuración determinada por el sitio web.
- Abrir las opciones de personalización pueden fácilmente generar problemas de usabilidad.

Fuente: http://www.nngroup.com/articles/item-list-view-all/

Si has recibido una notificación de penalización en los ranking por parte del equipo de Google conviene hacer una solicitud para que reconsideren su decisión. Lo ponen difícil ya que no incluyen en su notificación los puntos concretos por los que te penalizan. Hay que revisar el sitio completo siguiendo, eso sí, unos consejos básicos para adecuar la página a sus requisitos antes de enviar dicha notificación.

Search Engine Watch (SEW) ha puesto a disposición de las empresas una pequeña guía y ejemplos para proceder a la "limpieza" de su sitio web.

• En primer lugar, limpia tu sitio web de enlaces no naturales, virus, spam y elementos dudosos.
• Notifica a Google que dispones de un disavow.txt.
• Sé sincero, indica a Google que has utilizado una empresa de SEO externa para el posicionamiento de tu web y que ésta ha utilizado Spam, enlaces no naturales y demás. No trates de quitarte culpas por ello, tú eres el responsable, pero cuéntaselo a Google.
• Sigue sus recomendaciones para realizar la reconsideración, mira este video donde lo explica:

• No te enfades demasiado, aunque creas que Google tiene la culpa en parte, sé cordial y respetuoso, las formas también importan.
• Promete que serás bueno a partir de ahora y que no volverás a realizar "actos impuros".

Después de todo esto, supongo que querrás saber cuánto tiempo tarda Google en responder a tu solicitud de reconsideración. Aquí tienes  otro video donde lo explica:

Por último, este es un buen ejemplo de una carta de reconsideración, ejemplo ofrecido por el equipo de Google:

Dear Google Webspam team member,

Thank you for taking the time to read our request. Our site was recently given a penalty for unnatural links. In reviewing our links, we now see that we have tried to manipulate the search results by using links containing anchor text from syndicated articles. We also purchased links from [company name]. Although these actions were taken by our SEO Company, [insert name], we take full responsibility for their work. We no longer employ this company.

We have worked hard over the last few months to remove as many of these links as possible. We have contacted webmasters using their email address available on the site, their whois address and also via contact forms where available. This spreadsheet shows all of our links and what efforts we have taken for removal:

[link to Google Spreadsheet. IMPORTANT - Make sure you change the privacy settings on the Google Doc so that anyone with the link can see it]

This document shows the original source code of each of the emails that we have sent to webmasters:

[insert link to Google Doc]

And this document shows screenshots of contact forms that we have filled out.

[insert link to Google Doc]

We have submitted a disavow.txt file to ask Google to disavow the unnatural links that we were unable to remove.

Thank you again for reading this request. We have worked hard to resolve the quality issues on our site and are completely committed to following the Quality Guidelines from this point on.

Sincerely,
[your name]

Google a través de un nuevo video de Matt Cuts trata de explicar de manera sencilla algo tan complejo como el funcionamiento de un buscador.

La información y los datos son básicos para saber cual de los resultados obtenidos en una búsqueda es el mejor, y esto es lo que determina que una nueva información vaya variando su posición en función de que Google vaya recompilando más datos para saber cuál de los resultados es más completo, de calidad y original. A partir de aquí y una vez que han pasado unos días y Google lo va teniendo más claro los rankings se estabilizan.

Esta es la explicación de que los rankings vayan cambiando con el tiempo, de ahí la importancia de un trabajo constante sobre los contenidos más relevantes de tu página web e ir ofreciendo a Google contenido interesante y original que indexar.

Desde Google nos invitan a difundir una guía básica para principiantes en esto del posicionamiento (SEO) de una página web, blog, wordpress...

Se compone de una sencilla infografía que anima a realizar las tareas de creación de la página web teniendo en cuenta tres premisas básicas:

1- Describe de manera concisa, clara e informativa tu página dentro del título de la página. Asegúrate de que tanto las URL del dominio como de las subsecciones se pueden leer correctamente y son informativas. Y además escribe descripciones únicas para cada página del sitioweb, como mucho en 160 caracteres.

2- Ayuda a Google a entender tus imágenes. Dótalas de un texto alt descriptivo, haz que el nombre de archivo sea corto pero también descriptivo, y por último pon un pie de foto que también la defina.

3- Mantén tu sitioweb vivo, es tu escaparate informativo, aporta información periódicamente, ponte en el lugar de tu visitante que tiene interés por conocer tus últimas novedades.

Si después de realizar todo esto te ha picado el gusanillo del posicionamiento en Google, entonces estás preparado para la Guía de Google SEO Starter.

El App Store se perfila junto al de Google Play como los dos más importantes mercados actuales de software. Prácticamente se podría decir que si no está en el AppStore o no es accesible como una WebApp, no es un software que llegue al gran público.

La publicación en el AppStore puede ser un tanto complicada, ya que implica varios pasos por parte del desarrollador. A continuación explicamos una perspectiva general de todo el proceso.

Registrarse como Apple Developer

El primer paso es registrarse como desarrollador de Apple desde http://developer.apple.com/devcenter/ios/index.action pudiendo enlazar nuestro Apple ID existente a una cuenta de desarrollador o crear una nueva.

Una vez rellenados nuestros datos y verificada la cuenta, deberemos entrar dentro de ella.

Entrando en el programa iOS Developer Program

Cuando estemos dentro de nuestra cuenta de Apple Developer, entraremos en nuestra cuenta y veremos en el panel de control la opción Join the Developer Program que nos dará acceso a programar apps para iOS (hay que prestar atención a ésto ya que cada tipo de app/aplicación Apple es diferente y no es el mismo este programa que el de aplicaciones de MacOS X)

Durante este proceso deberemos prestar atención a varios puntos:

• En el resgistro, nuestro nombre, apellidos o cualquier otro dato no deberá contener tildes o si no recibiremos una llamada desde Apple diciendo que nuestra cuenta no puede ser completada hasta que los eliminemos del proceso de registro.
• Deberemos pagar la cuota anual de desarrollador de Apple, existen varios planes según si por ejemplo queremos que nuestras apps se distribuyan sólo a través del Apple Store o también queremos que puedan ser instaladas directamente en el dispositivo sin pasar por él. En nuestro caso vamos a elegir la cuota básica que ronda unos 99$.
• Deberemos aportar los datos acreditativos de empresa en el proceso o como individual, esto varía según el país

Tras realizar el pago, el proceso de registro quedará en espera para que Apple valide el nuevo usuario. Esta espera puede ser de unos pocos días, durante los cuales Apple puede ponerse en contacto con nosotros por teléfono para verificar o pedir aclaraciones sobre algún dato.

Instalando Xcode: entorno de desarrollo

En estos momentos de espera es un buen momento para instalar el entorno de desarrollo Xcode (tipo Eclipse, Netbeans, Visual Studio, ...) desde https://developer.apple.com/xcode/ que dependerá de las últimas versiones de MacOS X (no se había dicho antes, pero sí, para programar apps de iOS necesitamos un MacOS X).

Es importante que mantengamos Xcode actualizado a su última versión si queremos que nuestras aplicaciones sean válidas en las últimas versiones de iOS.

iOS Provisioning portal: certificados

Cuando tengamos la verificación por parte de Apple, volveremos a entrar en el portal Apple Developer y veremos que nuestro usuario tiene nuevas opciones que antes no tenía. Si exploramos un poco veremos que existen multitud de guías de programación, descargas, documentación vídeos, etc. (tanta que nos pueda hacernos sentir un poco perdidos).

El área iOS Provisioning portal nos permite correr apps en entorno de pruebas en dispositivos reales (iPhone, iPad, iPod, ...) que todavía no han sido publicadas. Este proceso se hace a través de software firmado con certificados digitales, que existen de dos tipos:

• Development profiles: sólo válidos para desarrollo
• Distribution profiles: para distribución

Para que podamos empezar a probar, entraremos en el enlace de iOS Provisioning portal y en su menú principal en Certificates donde veremos las pestañas de Development y Distribution. Haremos una petición de certificado mediante el botón de Request Certificate.

Antes de seguir, dejaremos la página web un momento y prepararemos el certificado de desarrollo/distribución. En Spotlight buscaremos el programa Keychain access y pulsaremos sobre el menú Keychain Access -> Certificate assistant -> Request a Certificate from a Certificate Authority y a continuación rellenaremos con nuestros datos marcando la opción Saved to disk que nos generará un certificado X.509 con nuestros datos.

Volveremos al navegador web y subiremos el nuevo archivo generado. Nos devolverá a la página principal de certificados que el estado de nuestro certificado puede estar pendiente de aprobación. Esta petición se resuelve automáticamente en poco tiempo (máximo en algunos minutos), y cuando esté lista nos aparecerá un botón que nos permitirá la descarga del certificado.

Una vez descargado, haremos doble click sobre el archivo y se importará a nuestro Keychain.

iOS Provisioning portal: dispositivos de entorno de pruebas

En el paso anterior creamos los certificados necesarios para autenticarnos como desarrollador iOS, pero también deberemos especificar los dispositivos que pueden estar en el entorno de pruebas.

Para añadir nuevos, en iOS Provisioning portal -> Devices -> Add devices desde donde tendremos que añadir cada UDID de cada uno de los dispositivos del entorno de pruebas. El UDID es un identificador único para cada dispositivo. Una manera sencilla de verlo es desde iTunes, desde la pestaña de dispositivo se refleja una serie de caracteres alfanuméricos.

iOS Provisioning portal: App ID y Provisioning

Por cada app, deberemos crear un App ID que identificará exclusivamente a dicha app. Para ello en iOS Provisioning portal -> Devices -> App ID crearemos el identificador único de nuestra app.

A continuación, en Provisioning haremos click en New profile donde crearemos un perfil para nuestro App ID. Entre las opciones deberemos prestar atención al Distribution Method: App Store o Ad-Hoc.

Nos devolverá a la pantalla principal de Provisioning y veremos un botón de descarga del profile, lo descargaremos e instalaremos en nuestro PC.

Para ver que está correctamente instalado en nuestro ordenador, abriremos Xcode y en Organizer, veremos que en sus Provisioning profiles tenemos ya preparado el perfil para nuestra App.

Programar nuestra aplicación en Objective C

Este paso creo que está claro, programaremos lo que queramos mediante Xcode y probaremos lo que hagamos en el simulador.

Probar en iPhone/iPad/iPod

Conectaremos el dispositivo que hemos introducido el UDID y nos aparecerá la ventana de Organizer. Si es la primera vez que lo conectamos deberemos hacer click en el botón Use for development. Podemos echarle un vistazo a los Provisioning profiles, si esos perfiles están asignados al dispositivo actual, si no tuviera ninguno seleccionaremos iOS Team Provisioning Profile.

Ahora iremos a la pantalla principal de Xcode y seleccionaremos el primer icono de proyecto (de color azul) y en el submenú en Target. A continuación especificaremos según la pestaña:

• Summary: dispositivos, identificadores y versiones.
• Info: Bundle identifier, como parte de nuestra App ID
• Build Settings: buscaremos el Code Signing Identity, eligiendo para cada perfil el certificado de desarrollo o distribución, según necesitemos.

Esto nos permitirá a ejecutar a través de Xcode la app en nuestro dispositivo.

Subiendo nuestra App a App Store con iTunes Connect

Este es el portal donde se suben las apps y se especifica su información: nombre, capturas de pantalla, precio, etc. Deberemos entrar en https://itunesconnect.apple.com/ y con nuestras credenciales de desarrollador iOS. En este punto deberemos tener bien preparado lo siguiente:

• Nombre
• Descripción
• Icono 512x512px
• Capturas de pantalla: al menos una para iPhone y otra para iPad en los siguientes formatos 320x460 (sin barra de estado); 320x480; 640x920 (retina, sin barra de estado); 640x960 (retina); para orientación paisaje 480x300 (sin barra de estado); 480x320; 960x600 (retina, sin barra de estado); o 960×640 (retina).

Antes de mandar la app, deberemos tener claro cuales son los App Review Guidelines, sobre el buen uso de las apps que van a ser publicadas en cuanto a funcionamiento y contenido. Es importante que revisemos la guía https://developer.apple.com/appstore/guidelines.html y estemos seguros para que la app no sea rechazada.

Dentro de iTunes Connect darle a Manage your applications y Add new app donde rellenaremos los datos de app, entre ellos seleccionaremos el App ID creado para el app.

Tras rellenar todos los datos, haremos click en Ready to Upload Binary.

La subida de los archivos binarios se hará a través de Xcode, como Scheme elegiremos iOS Device y despues Product Archive. Se abrirá una ventana de Organizer donde haremos click en Submit y tras subir la app, volveremos a iTunes connect viendo que la app ya está recibida y pendiente de revisión.

Entradas relacionadas

Distribución de Apps avanzada en Apple Store: compra masiva y distribución limitada

La plataforma Windows Store nos permite descargarnos aplicaciones para la plataforma de Windows 8, Windows Phone y Windows RT, pero para que sean accesibles deben cumplir una serie de estándar y ser aprobada.

A continuación explicaremos brevemente el proceso para subir apps y aplicaciones al Windows Store

Registro como desarrollador

Deberemos registrarnos como desarrolladores ya sea como empresa o como individuo desde una cuenta de Windows Live en el enlace http://go.microsoft.com/fwlink/p/?LinkID=245786 

El registro se completará con el pago de 37€ que garantizará que somos personas reales y no tenemos propósitos de spam.

Envío del app

Desde el dashboard de Windows Store, clickaremos en Submit an app donde especificaremos:

• Nombre
• Detalles de venta
• Opciones avanzadas
• Restricciones de uso por edad del usuario según el contenido
• Uso de criptografía
• Paquetes: en este punto seleccionaremos los paquetes de nuestro proyecto de Visual Studio
• Descripción

Una vez enviada, pasará por distintas fases de certificación por parte del equipo de Microsoft

Fases de validación

Podemos comprobar el estado de nuestra app desde el dashboard de Windows Store. Los diferentes estados pueden ser:

• Upload
• Preprocessing
• Security test
• Technical compliance tests
• Content compliance
• Release
• Signing and publishing
• Certification report: paso final cuando ha sido totalmente aceptada

durante los cuáles pueden ser rechazada si no cumple el proceso de validación. Si no fuera aceptada, se crearía un informe de los fallos detectados y consejos para solucionarlos.

Ahora nos toca explicar el proceso de subida de apps con la plataforma de RIM. 

Crear cuenta BlackBerry App World Vendor Account

Esta cuenta de desarrollador de BlackBerry la podemos crear desde https://appworld.blackberry.com/isvportal/login_input.do?pageId=0 desde donde deberemos crear la cuenta.

Una vez registrados nos enviarán un email con el proceso explicativo de como autenticarnos como empresa o como individuo, enviando los certificados necesarios por email. Una vez que así lo hagamos, nos darán de alta como empresa.

Subir la app

Una vez que recibamos la respuesta por parte de RIM dándonos acceso, volveremos al Vendor Portal y autenticándonos entraremos en nuestro dashboard.

En el menú izquierdo, haremos click en Manage products y después en Add product donde iniciaremos el proceso de datos de nuestra aplicación, incluyendo iconos y capturas de pantalla.

Una vez que terminemos, haremos click en el icono "+" bajo Add release donde subiremos los ficheros, en el caso de una app BlackBerry subiremos el archivo .zip generado tras una build marcando la opción Batch Import Files, y si es para PlayBook el archivo .BAR marcando la opción File Bundles.

Para mayor compatibilidad, haremos click en My product supports user generated content dejando el resto de opciones por defecto.

Una vez que estemos seguros de que todo es correcto, haremos click en Send for review y esperaremos al resultado de la revisión.

Fuentes

• Blacberry Developer

Una vez creada nuestra app con Android Developer Tools y estemos seguros de que todo funciona como queremos, el siguiente paso es hacer un Hello World! al mundo. A continuación vemos cómo.

Crear cuenta de Google

Esta podrá ser una cuenta GMail, Youtube, Google Apps, etc. o cualquier de los servicios que proporciona Google. Esta cuenta estará asociada a la app y nos valdrá para realizar futuras modificaciones.

Acceder a la consola Google Play para desarrolladores

La consola de Google Play será el centro donde controlaremos todas las apps, su estado y estadísticas. Se accede desde https://play.google.com/apps/publish/v2/ con la cuenta GMail que anteriormente hemos creado o queremos usar.

La primera vez que accedamos, deberemos registrar dicha cuenta como desarrollador pagando la cuota de alta, que en el momento de escribir esta guía son 25$ haciendo un cargo a la tarjeta de crédito especificada.

Subir App

Seguidamente, haremos click en Añadir nueva aplicación y subiremos los archivos:

• APK: archivo generado tras la compilación del proyecto
• Capturas de pantalla: al menos un par y se pueden hacer desde el simulador
• Icono de alta resolución, como emblema en Play Store

A continuación especificaremos los detalles de la app como nombre, descripción, tipo, idioma, categoría opciones de publicación, información de contacto.

Deberemos rellenar cuidadosamente esta información ya que será la que se verá públicamente como información del app.

Una vez hecho el envío, podremos crear traducciones para diferentes idiomas, capturas de pantalla, gráficos de funciones, iconos de alta resolución, URL de vídeo de YouTube y gráficos promocionales localizados geográficamente.

Asignar un precio de venta por app o por contenido

En el caso de que queramos asignar un precio de venta de nuestra app deberemos echarle un vistazo a la documentación de Google http://support.google.com/googleplay/android-developer/topic/15867?hl=es para tener información completa sobre pagos, monedas, reembolso, etc. Por el contrario podemos utilizar el pago por contenido (libros, vídeos, revistas...) dentro de la propia app durante la programación, podemos encontrar más información en http://developer.android.com/google/play/billing/index.html

Referencias

Android Developer: Cómo subir aplicaciones http://support.google.com/googleplay/android-developer/answer/113469?hl=es

Esta guía publicada por primera vez por Google recoge la guía de clasificación de la calidad de las búsquedas que utiliza el buscador. Está dentro de un archivo pdf extenso y publicado en inglés.

En este otro enlace, también en inglés, se pueden ver los cambios realizados en esta última versión de noviembre de 2012 con respecto a versiones previas.

Y siguiendo con el mismo tema, también Google acaba de publicar una infografía interactiva sobre el funcionamiento de las búsquedas en el buscador. Se divide en tres partes principales en las que enseña cómo busca y encuentra el contenido, cómo utiliza los algoritmos para clasificarlo y presentar el resultado de una búsqueda, y finalmente qué hace con el spam.

Esta infografía no pasa de ser una introducción sobre los conceptos básicos de las búsquedas en Google.

Facebook, YouTube, Yahoo, Wikipedia y Amazon son las 5 páginas web que recogen el 20% del tráfico generado desde los buscadores. Datos recogidos en un estudio realizado por Digital Marketer Report 2013. Coinciden estas 5 páginas con los 5 términos más buscados en Google en 2012. Por lo tanto, estas 5 se llevan 1 de cada 5 clicks en los buscadores. El resto nos corresponde a los demás. También está el dato de que las 500 webs que primero aparecen copan el 50% del tráfico global.

Los porcentajes se distribuyen de la siguiente manera: Facebook - 8,48%, Youtube - 5,55%, Yahoo - 2,63%, Wikipedia - 2,01% y Amazon - 1,40%.

Sobre el tráfico pagado, más de lo mismo, las 10 primeras tienen el 16% del total.
Estos son los porcentajes para este tráfico:

Amazon - 4,19%, eBay - 3,46%, eHow - 2,44%, BestBuy - 1,06% y Yahoo! Shopping - 0´85%

La recomendación para los SEO era no cambiar las URL más que como una de las últimas opciones, ya que se pierde algo de PageRank, pero no demasiado. Ahora sabemos que cuando se enlacza una página con PageRank X a otra, el PageRank traspasado ronda el 85%, con lo que la página enlazada será de PageRank 0,8X. Esto mismo ocurre con las redirecciones 301.

Puedes consultar este video donde Matt Cutts de Google Webmaster Help lo explica.

Cuando hacemos una aplicación web, normalmente usamos javascript para modificar elementos html en la parte cliente, con librerías como jquery se pueden hacer muchas cosas. Pero cada vez las aplicaciones web son más complejas, sobre todo en la parte del cliente y no sólo necesitamos mofificar un elemento, sino cargar datos con disposiciones complejas.

Para esto existen multitud de motores de plantillas javascript, como por ejemplo, EJS, trimPath, Hogan.js, ...

Estos motores de plantillas nos permiten separar la lógica de la aplicación de la vista, pero en el lado del cliente, del mismo modo que nos lo permiten otros lenguajes del lado del servidor como PHP, ASP, Java (JSP).

Quizás el escenario ideal para utilizar estas tecnologías es cuando utilizamos el lado del servidor para obtener los datos en formato XML o JSON por medio de WebServices o llamadas REST. Luego sólo tenemos que separar las presentaciones de estos datos en plantillas para pasarle los datos desde nuestra aplicación y mostrarlas dónde deseemos.

Imaginemos que tenemos en el servidor una plantilla en un archivo de texto plano (templates/users.ejs). En esta plantilla mostraremos un listado de usuarios. Para nuestro ejemplo utilizaremos la librería EJS que tiene una sintaxis muy similar a ASP.

Si nuestra aplicación llama a un servidor REST para obtener la lista de usuarios, por ejemplo a http://api.servidor.com/users.json y recibimos los datos en una variable llamada userData:

var tpl = new EJS("templates/users.ejs");
var html = tpl.render({users: userData});

Con este código tendríamos la variable html con el código html a insertar en nuestra aplicación.

La plantilla users.ejs podría ser de la siguiente forma:

<ul>
	<% for (var i in users) { %>
	<i><%= users[i].name %>></li>
	<% } %>
</ul>

Con otros motores de plantillas como Hogan.js tendríamos una sintaxis más limpia, ejemplo:

<ul>
	{{#users}}
	<li> {{name}} </li>
	{{/users}}
</ul>

Cada uno tendrá sus preferencias a la hora de seleccionar uno de estos motores, habrá que tener en cuenta la limpieza en el html, la velocidad de proceso, etc ...

Vamos a ver una forma alternativa de definir un pasador de imágenes usando tecnologías de HTML5, en concreto, transiciones de CSS3.

Con este método nos encontramos con algunas ventajas pero también con algunas desventajas:

Ventajas:

• Las animaciones serán más suaves ya que es el navegador el que se encarga de hacerlas de forma nativa.
• Podemos cambiar el tipo de animación simplemente modificando la hoja de estilos.
• En los navegadores que no soporten transiciones el pasador seguirá funcionando, sólo que no se verán las animaciones.
• El código javascript necesario se reduce.

Desventajas:

• Con algún tipo de animaciones tendremos que bloquear el pasador mientras se realiza la animación, para que no se desmonte nuestra maqueta y no se vea feo.
• En navegadores antiguos (Explorer versión menor a la 10) no se verán las animaciones.

Funcionamiento:

Lo primero que tenemos que hacer es inicializar los elementos que queremos animar. En nuestro caso pondremos la clase "active" al elemento actual, y las clases "prev" y "next" al elemento anterior y siguiente respectivamente

Para las animaciones definiremos 3 clases "center", "prev" y "next". Estas clases serán las posiciones finales de los elementos. Por ejemplo, si le damos al botón siguiente. El elemento con clase "active" pasará a tener la clase "prev" y el elemento con la clase "next" pasará a tener la clase "center".

.slider div.images div.next {
	left: 100%;
}
.slider div.images div.prev {
	left: -100%;
}
.slider div.images div.center {
	left: 0;
}

Para que funcionen las animaciones definiremos una clase "animate" a la cual le pondremos la transición a utilizar:

.slider div.images div.animate {
	transition: left 400ms;
	-moz-transition: left 400ms;
	-webkit-transition: left 400ms;
	-ms-transition: left 400ms;
	-o-transition: left 400ms;
	z-index: 2;
}

Luego sólo tendremos que ir añadiendo y quitando clases por medio de javascript.

El funcionamiento del pasador se puede ver aquí:

El código fuente se puede ver aquí

Cambiando el css de las classes "next", "prev" y "center" y el tipo de transición podemos tener distintas animaciones para este pasador, en el ejemplo, las imágenes se mueven en horizontal, pero sería muy sencillo hacer que se moviesen en vertical, simplemente cambiando la propiedad left por top.

• Para videojuegos, con requestAnimationFrame
• Animaciones propias de SVG
• Eventos en SVG

En la primera se habla de cómo hacer animaciones avanzadas con Javascript para juegos mientras que en las dos últimas se habla de como hacer animaciones con SVG.

Ésta entrada va a tratar de cómo hacerlo con un enfoque diferente, ya que se va a centrar de como es accesible cualquier SVG a través de los elementos DOM, y por tanto desde Javascript y CSS 3.

Vamos a suponer un ejemplo sencillo de un elemento rect (rectángulo) de SVG que variamos su posición mediante animate de jQuery y modificar su color con animation de CSS 3 al hacer click en un botón, añadiendo otros eventos como un evento hover y el evento click en el recuadro.

La diferencia con el resto de anteriores maneras descritas en otras entradas de blog, es el uso de jQuery para conseguir los efectos, ya que tenemos control total sobre el proceso de animación  otros elementos que estén fuera del SVG.

En primer lugar deberemos tener en cuenta el navegador a usar. El soporte total para SVG ocurre en Firefox, Google Chrome, Safari, Opera, pero no en Internet Explorer 9 (e inferiores), por lo que el siguiente ejemplo es muy probable que no funcione.

A continuación, el ejemplo:

y ahora el código fuente:

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

    <style>
    #frame {
        width: 300px;
        height: 300px;
        border: 4px solid black;
        position: relative;
    }
    #svgtest {
        cursor: pointer;
        position: absolute;
        top: 0px;
        left: 0px;
    }
    #svgtest rect {
        stroke: blue;
        fill: red;
        stroke-width: 1px;
    }
    #svgtest rect:hover {
        fill: blue;
    }

    @keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    /* Firefox */
    @-moz-keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    /* Safari y Chrome */
    @-webkit-keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    /* Opera */
    @-o-keyframes animacionCambioColor {
    0%   {fill:red;}
    25%  {fill:yellow;}
    50%  {fill:orange;}
    100% {fill:red;}
    }

    </style>
<script>
$(document).ready(function() {
    $("#svgtest rect").click(function() {
        alert("Elemento rect");
    });
    $("#animar_rect").click(function(e) {
        e.preventDefault();
        var frame_height = $("#frame").css("height").replace("px","");
        var frame_width = $("#frame").css("width").replace("px","");
        var rect_height =  $("#svgtest rect").attr("height");
        var rect_width =  $("#svgtest rect").attr("width");

        // Asignamos al rectángulo el cambio de color
        $('#svgtest rect').css("animation","animacionCambioColor 12s");

        // Movemos hasta la mitad inferior
        $('#svgtest').animate({
            left: (frame_width/2)-(rect_width/2),
            top: frame_height-rect_height-1
        }, 3000, function() {
            // Movemos hasta la mitad derecha
            $('#svgtest').animate({
                left: frame_width-rect_width-1,
                top: (frame_height/2)-(rect_height/2)
            }, 3000, function() {
                // Movemos hasta la mitad derecha
                $('#svgtest').animate({
                    left: 0,
                    top: 0
                }, 3000, function() {
                    // Quitamos la asignación de la animación para poder ejecutarla otra vez
                    $('#svgtest rect').css("animation","none");
                });
            });
        });
    });
});
</script>
    <button id="animar_rect">Animar rectángulo</button>
    <div id="frame">
        <svg id="svgtest" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <rect x="1" y="1" height="50" width="50" rx="20" ry="20"/>
        </svg>
    </div>
</body>
</html>

Adobe Edge como programa para crear animaciones HTML 5

Aunque la opción de Adobe Edge es relativamente nueva y puede ser que todavía esté mucho por hacer para ese software, es bastante significativo que Adobe saque una línea de productos que es cláramente competidora de Adobe Flash.

En ocasiones ocurre que registramos un dominio, o cambiamos los DNS de un dominio y este no es accesible durante un tiempo. O incluso queremos hacer pruebas con un dominio no registrado. Por tanto vamos a ver como hacer que dicho dominio sea accesible para nuestro equipo. Independientemente del sistema operativo que tengamos, lo primero es tener claro el dominio que queremos añadir y la IP donde se encuentra dicho dominio o donde queramos que apunte el dominio en nuestro equipo.

Supongamos que queremos añadir el dominio prueba.com a la ip 192.168.1.2, para ello hay que realizar lo siguiente según el sistema operativo (donde básicamente consiste en editar un archivo).

Windows:
- Abrir el menú de inicio (CONTROL + ESCAPE, o tecla de windows a la izquierda del ALT), y hacer click sobre Equipo.
- Entramos en C:/Windows (carpeta donde esté instalado el sistema operativo), y buscamos el archivo “notepad”. Lo seleccionamos y le damos al "botón derecho" del ratón, y seleccionamos "Ejecutar como administrador".
- Ahora en notepad le damos arriba a "Archivo" y "abrir", y entramos en la siguiente ruta: C:/Windows/System32/drivers/etc
- Una vez en la ruta anterior, cambiamos el filtro (esquina inferior derecha) de "*.txt" a "todos los archivos", y abrimos el archivo “hosts”
- Ahora nos posicionamos al final del archivo, y en una línea nueva escribimos lo siguiente:
192.168.1.2 prueba.com
192.168.1.2 www.prueba.com
- Guardamos el archivo, y abrimos un navegador donde escribimos el dominio y comprobamos que efectivamente apunta a la ip indicada. También se puede hacer un “ping” al dominio desde nuestro equipo para comprobar la redirección.

Linux:
- Accedemos a la línea de comandos.
- Nos identificamos como usuario “root”.
- Editamos el archivo /etc/hosts con nuestro editor favorito (nano, vi, …)
- Y añadimos al final de dicho archivo las líneas:
192.168.1.2 prueba.com
192.168.1.2 www.prueba.com
- Ahora tan solo queda probar que funciona correctamente. Para ello hacemos un ping al dominio y vemos que se resuelve a la IP correspondiente.

MAC:
- Accedemos a la línea de comandos.
- Nos identificamos como usuario “root”.
- Editamos el archivo /private/etc/hosts
- Y añadimos al final de dicho archivo las líneas:
192.168.1.2 prueba.com
192.168.1.2 www.prueba.com
- Ahora tan solo queda probar que funciona correctamente.

Normalmente la carga de imágenes se suele optimizar de varias formas, donde en su mayoría todas ellas tienen en particular o bien reducir el tamaño de las imágenes, utilizando menos calidad u otro formato más eficiente (gif, jpg...), o reducir el número de peticiones al servidor o servidor de imágenes.

La primera opción no tienen ningún secreto, cuanto menos ocupe la foto más rápido llegará al visitante. Por ello se recomienda exportar todas las imágenes para web (Photoshop u otros editores llevan ya opciones de optimización para ello), escogiendo una calidad razonable.

La segunda opción se puede abordar de varias formas pero la más utilizada es la creación de hojas de sprites. Esta técnica consiste en juntar todas las imágenes de la web en una sola imágen más grande. Por tanto se reduce drásticamente el número de peticiones que se realizan al servidor.

Ahora bien una vez que el visitante tiene todas las fotos descargadas, es decir, en su caché del navegador. Por qué debería esté volver a descargar las fotos cada vez que vuelva a visitar la web. Puesto que si las fotos no han cambiado, entonces no se deberían volver a bajar. Este es el caso que vamos a optimizar en este artículo, para así ahorrar ancho de banda en la red y a su vez el tiempo de carga de la página.

Para habilitar la caché de imágenes tan solo debemos indicarle al navegador que las fotos no han caducado todavía, que están son todavía válidas. Y esto se consigue indicando o bien la duración de dichas fotos, o la fecha específica de caducidad. Dicha fecha de caducidad o duración debe ir en la cabecera de cada foto. Esto se puede hacer en PHP gracias a la función “header”, pero es mucho más rápido hacerlo vía .htaccess utilizando el módulo de “expires” de Apache (mod_expires).

Por ejemplo podemos incluir en nuestro .htaccess el siguiente código:

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/png A2592000
ExpiresByType image/jpg A2592000

De esta manera estamos indicando que todos los archivos gif, png y jpg serán válidos hasta 1 mes después de tenerlo en la cache, es decir, desde que visitamos la web por primera vez. Ahora bien si indicamos en vez de “A” de “access”, una “M” de “modification” entonces los archivos serían válidos hasta 1 mes desde su fecha de modificación, de esta manera caducarán a la vez para todos los visitantes.

ExpiresByType image/gif M2592000

El tiempo en estos casos se indica en segundos. Pero esta directiva permite una forma más sencilla como:

ExpiresByType text/html "access plus 1 month"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

Esto no es solo aplicable para las imágenes, sino también para archivos css y javascript. Ahora bien supongamos que cambiamos una de las imágenes y la mantenemos con el mismo nombre. En este caso si la foto caduca un mes después de la primera visita, entonces el visitante seguirá viendo la foto antigua, por ello una solución consiste en ir añadiendo un sufijo a la imagen como un número de versión, de esta forma al cambiar el nombre de la imagen, esta se volverá a descargar.

¿Qué es un framework HTML5?

En el ámbito web, normalmente estamos más acostumbrados a asociar la palabra framework con los lenguajes de servidor. Estos frameworks, tan populares como Symfony, Ruby On Rails,… han conseguido aumentar enórmemente la calidad de los productos web.

Estos frameworks están más enfocados a una programación eficiente, centrándose demasiado en el lenguaje de servidor. Existe también una tendencia creciente, gracias a las interfaces RESTfuls a hacer webs que no tienen por qué necesariamente utilizar programación de servidor directamente.

Para cualquiera de estas dos formas, es interesante centrarnos en un framework que trabaje quizás a un nivel más importante que es el lenguaje HTML5

Vamos a numerar algunas de las mejores prácticas

• Preparar una hoja de estilos, resenteando, normalizando y ofreciendo herramientas prácticas (helpers)
• Directivas de optimización del servidor
• Metainformación en el servidor (robots.txt, humans.txt, …)
• Organización del layout HTML5
• Estructura de carpetas para organizar la información
• Documentación

Características básicas. HTML5 Boilerplate

Los dos frameworks comentados aquí (HTML5 Boilerplate y Twitter Bootstrap) presentan una serie de características que son muy interesantes para el desarrollo web. Vamos a explicar un poco más detalladamente algunos de estos puntos:

Normalización de hojas de estilo

Desde hace mucho tiempo ha existido la tendencia de resetear las hojas de estilo para eliminar todas las diferencias que asigna cada navegador a las etiquetas y así partir desde cero. Esta es una gran idea que ahora se ha llevado al siguiente paso: Normalizar. En lugar de resetear todos los estilos, vamos a darle uniformidad haciendo que todos los estilos sean coherentes en una ámplia gama de navegadores.

Soporte a versiones antiguas

Otro concepto interesante es el sistema que ofrecen para dar soporte a navegadores más antiguos. Esto lo hace de dos maneras:

• Modernizr: Es una librería que facilita saber qué capacidades HTML5 soporta tu navegador para facilitar la carga de Polyfills en el caso de no soportarlo nativamente.
• Condicionales: Mediante el uso de condicionales HTML se asignan una serie de clases a la etiqueta &t;html> para poder cambiarla desde CSS. Además, añaden una clase no-js que será reemplaza a posteriorí por js de forma que podremos saber también desde CSS si el Javascript está deshabilitado.

Pero !OJO!. Ni a nosotros, ni a los frameworks, nos gustan los navegadores antiguos. Existen por la red una ámplia gama de iniciativas como Browse Happy que anima a los usuarios a mantener actualizados sus navagadores, por temas de seguridad y rendimiento. HTML5 Boilerplate, por ejemplo, tiene un mensaje que enlaza con esta página en el caso de tener una versión de navegador arcaica. También menciona la posibilidad de Google Frame y así embeber un motor de renderizado moderno en nuestros antiguos navegadores.

Orden de carga

Para una mayor rapidez de carga de la página sugieren inlcuir todos nuestros SCRIPTs al final de la página, de forma que estos puedan cargarse a la vez que la página empieza a renderizarse y que no bloqueen la carga en el caso de que uno no pueda ser cargado. Incluso el SCRIPT de Google Analytics, el cual Google recomienda añadirlo entre las etiquetas <HEAD>. (Google lo recomienda para que la visita pueda contar incluso si el navegador no ha terminado de carga la página).

La excepción a esta regla es el caso de Modernizr. Es necesario que se cargue antes de que la página comience a renderizarse para que los nuevos elementos HTML5 sean soportados sin problemas.

Optimizando el servidor

Existen directivas .HTACCESS que permiten especificar estrategias de caché eficientes para las webs. En el caso de que nuestro servidor permita el uso de este archivo y tenga instalados una serie de módulos vamos a ser capaces de enviar nuestras páginas web comprimidas en GZIP, cachear nuestras imágenes y scripts e incrementar el rendimiento de nuestra aplicación significativamente. En el caso de que no soporte este archivo, tendremos que modificar directamente nuestros archivos de configuración en el servidor.

Twitter Bootstrap

Todas las caracteristicas anteriormente mencionadas hacen referencia al framework HTML5 Boilerplate. El otro framework que destacamos hoy, Twitter Bootstrap da una vuelta de tuerca más y se ofrece como una manera sencilla de empezar a montar el prototipo de tu página web de forma rápida y cómoda.

Twitter Bootstrap es una colección de herramientas de software libre para la creación de sitios y aplicaciones web. Contiene plantillas de diseño basadas en HTML y CSS con tipografías, formularios, botones, gráficos, barras de navegación y demás componentes de interfaz, así como extensiones opcionales de JavaScript. Es el proyecto mas popular en GitHub y es usado por la NASA y la MSNBC junto a demás organizaciones.

Además de utilizar muchos conceptos anteriormente mencionados, Twitter BootStrap ofrece herramientas de andamiaje (scaffolding) para estructurar nuestro LAYOUT de manera estática o líquida, componentes Javascript reusables tales como pasadores de imágenes, formularios, menús, migas de pan, etc. Todos realizados adoptando las mejores prácticas y permitiendo a los programadores extenderlos

También existen páginas que ofrecen plantillas (gratuitas y de pago) para utilizar estos componentes, tales como https://wrapbootstrap.com/

Una cosa muy intersante de este framework es que todos los componentes parten de hojas de estilo compiladas desde LESS. Así que, o bien cuando te descargas la última versión puedes definir una serie de variables (fuentes, colores, interlineado, …) o bien recompilar tu mismo estas hojas de estilo con algún compilador de LESS

Resumen

Gracias al uso de estos frameworks la comunidad de desarrolladores va a mejorar enormemente gracias a estandarización, uso de mejores prácticas y partir de una base sólida, testable y apoyada por una gran comunidad. Además de eso, vamos a ser capaces de montar prototipos rápidos y funcionales para poder centrárnos en lo realmente interesante que es la lógica de negocio.

Referencias

• http://html5boilerplate.com/
• http://twitter.github.com/bootstrap/
• http://necolas.github.com/normalize.css/
• http://modernizr.com/
• http://browsehappy.com/?locale=es
• http://humanstxt.org/ES

Tablets de Microsoft: Windows 8 / Windows RT

Aunque es un mercado emergente respecto a sus competidores directos Android e iOS, los resultados que ofrecen son de una estética muy vistosa y cómoda para el usuario, de una manera cláramente diferenciadora.

Un aspecto que deberemos tener claro, es que Windows 8 y Windows RT son en esencia el mismo sistema operativo pero con características algo diferentes: Windows 8 es para sistemas operativos x86 y Windows RT para ARM, por lo que Windows 8 tiene una mayor cantidad de aplicaciones pero Windows RT está más optimizado para tablets.

Preparando el entorno con Visual Studio 2012

Lo primero que deberemos hacer es instalar Visual Studio 2012 en el PC que utilicemos para desarrollar (no se puede instalar en Windows RT), comprando una licencia de empresa o si sólo queremos probarlo, con la edición Express.

Durante la instalación, crearemos una licencia de desarrollador, que nos servirá para firmar nuestras aplicaciones.

El siguiente paso será preparar el dispositivo, en este caso una tablet con Windows 8. Un aspecto importante es que el ordenador que se desarrolle y el dispositivos tengan conectividad directa, por ejemplo por WiFi aunque también se puede por USB, ambos dispositivos deberán poder verse a través de la red estando en el mismo grupo de trabajo.

Ahora deberemos instalar en el tablet las herramientas remotas para Visual Studio 2012, arquitectura ARM, que son descargables desde la misma página que el Visual Studio. Durante la instalación dejaremos todas las opciones por defecto y deberemos tener nuestra tablet preparada con una cuenta de usuario con contraseña.

Cada vez que queramos probar apps en la tablet, deberemos poner en marcha la aplicación Remote Debugging Tools, ya que abre un servidor que se queda a la escucha a espera de que Visual Studio se conecte.

HTML 5 + Javascript + Phonegap = App Windows 8

Instalaremos Phonegap descargando en primer lugar la última versión desde http://phonegap.com/download/ y tras descomprimirlo seguiremos la siguiente guía oficial de Phonegap aunque resumiremos aquí los pasos:

• Descomprimir Phonegap
• Crearemos un nuevo proyecto en Visual Studio del tipo Templates -> Javascript -> Blank project
• Una vez abierto el proyecto, añadiremos el archivo Javascript al proyecto ubicado en la carpeta de Phonegap/lib/windows-8/cordova.js dentro de la carpeta js de nuestro proyecto
  

y listo, a diferencia de otras plataformas como iOS o Android, no debemos añadir archivos al proyecto.

Ahora añadiremos cualquier código Phonegap, por ejemplo, en el tag <body>

    <body>    

    <script src="/js/cordova.js"></script>

    <script type="text/javascript">

        document.addEventListener("deviceready", function () {
            navigator.notification.alert("Este alert es de Phonegap");
        });

    </script>

    </body>
    

Deberemos prestar atención a que hemos puesto la referencia a cordova.js dentro del proyecto en la carpeta js.

Una vez que pongamos nuestro código JS, deberemos probarlo en la tablet. En vez de ejecutarlo en la máquina local, seleccionaremos Máquina remota en el menú de compilación.

Nos aparecerá entonces una pantalla en la que nos permitirá seleccionar las máquinas candidatas a ser dispositivos de prueba dentro de nuestra red y que estén corriendo la aplicación de depuración remota que antes hemos descrito.

Si todo va bien, podremos ver nuestra primera aplicación HTML 5 sobre Windows RT.

Referencias

• Diferencias entre Windows 8 y Windows RT
• Windows RT Store app Debugging
• Instalar Phonegap en Visual Studio 2012

Sabido es que cuando Google encuentra enlaces llamados de 'mala calidad' envía un email avisando. El problema es que no dice qué enlaces son esos, nos deja la tarea a nosotros, administradores de la web. Todo esto se debe al intento por parte de Google de evitar el link-building no natural (compra de enlaces o similar).

Existe una manera según Google, en concreto según Matt Cutts de encontrar éstos enlaces:

Por un lado ordenando por más recientes los enlaces del sitio en Webmaster Tools, y por otro aprendiendo de los ejemplos de enlaces no naturales que propone Google, y ver las similitudes con tus enlaces.

Para más información, consultar el siguiente video:

Si has verificado tu perfil, tu ranking será mejor. Esta parece ser una de las maneras que tiene Google de competir con otras redes sociales como Linkedin, Twitter o quién sabe si Facebook. Verifica tu perfil en Google + y los contenidos publicados bajo ese perfil mejorarán su posicionamiento.

Este es uno de las temas sobre los que habla Eric Schmidt, Presidente Ejecutivo de Google, en su último libro 'La nueva era digital' escrito junto con Jared Cohen, Jefe de Ideas de Google.

Entre otros comentarios sobre el futuro que nos aguarda, parece recomendable para cualquier SEO tener una cuenta en Google + (¿todavía no la tienes?), verificarla y asociarla a tus contenidos. Conseguirás mejor posicionamiento.

Para más información http://goo.gl/Q47nX.

Sabiendo que una de las tendencias del diseño web en 2013 es el desarrollo de sitios web con Diseño Responsivo o Sensible, se nos crea un problema al plantearnos qué ocurre con las inserciones AdSense de nuestras páginas.

Después de cerca de un año de espera, por parte de los desarrolladores de AdSense, para que Google tome cartas en el asunto y dé una solución en forma de unidades de anuncio que se adapten a los cambios de tamaño junto a los contenidos.

Sorpresivamente, Google AdSense Alemania dio a conocer el código que se debe utilizar para el cambio de tamaño de los anuncios. Por supuesto cumpliendo todas las directrices de AdSense. El código es:

Para Google hace ya mucho tiempo que los enlaces son de fácil manipulación. Son más importante para Google los enlaces que los otros ponen hacia tu web. De ahí la importancia que le da al intento de variar la manera de valorar los enlaces.

Ya que éstos siguen siendo la parte fundamental del trabajo en SEO, otorgarles  un menor valor y tener en cuenta otros factores en el mismo texto se ha convertido en una realidad para Google. Es suficiente con que en el artículo se mencione el nombre de la web o la palabra clave en otra parte para que Google lo considere como enlace natural.

A esto se refiere Citas Externas. Se abre una época de oportunidades para los SEO ya que los factores que intervienen en este proceso todavía no están del todo claros, y aquí como en todo, el que se adelanta… Y la mayoría de SEO opinan que esta es la tendencia del futuro.

No es tan sencillo analizar la estructura y composición de las Citas Externas. Por un lado están las menciones que te citan, en qué lugares se producen y junto a quién lo hacen. Por otro, tampoco es fácil acertar a medir la influencia que tienes, ¿eres original o mezclas contenido de otro sitios?

El patrón active record, conocido sobre todo por su uso en ruby on rails es un patrón de diseño que define una forma de acceder a los datos de una base de datos relacional y convertir las filas de una tabla en objetos.

Cuando se modifican los datos de un objeto se actualiza la fila correspondiente en la BBDD, cuando se crea un objeto se añade una fila y cuando se borra el objecto también se borra de la BBDD.

Para php nos encontramos con una implementación open source muy similar a cómo podemos trabajar en ruby on rails, la podemos encontrar en www.phpactiverecord.org

Su objetivo es simplificar enormemente la interacción con la base de datos y eliminar la tarea de escribir SQL a mano para operaciones comunes. A diferencia de otros ORM, no es necesario utilizar generadores de código ni mantener archivos de configuración para las tablas. Está basado en convenciones en lugar de configuraciones.

Un sencillo ejemplo de uso:

class Car extends ActiveRecordModel {

	static $belongs_to = array(
		array('driver'),
		array('trademark')
	);

}

Según las convenciones que se siguen, la clase Car se relaciona con la tabla cars (la clase en singular y la tabla en plural), esto se hace automáticamente y no es necesario configurar nada. En la propiedad de clase $belongs_to le indicamos que un coche tiene un conductor (clase Driver y tabla drivers) y una marca (clase Trademark y tabla trademarks). Las tablas tienen que tener un campo id (que será la clave primaria) y también es conveniente que tengan los campos create_at y updated_at, que son las fechas de creación y modificación respectivamente y que se actualizan automaticamente en los inserts y los updates.

Automáticamente también tenemos métodos sin tener que definir nada:

	$cars = Car::all(); // nos devuelve un array de objetos con todos los coches de la BBDD.
	$car = Car::find(1); // nos devuelve el coche con id=1
	$driver_name = $car->driver->name; // nos devuelve el nombre del conductor del coche anterior
	$car->price = 10000; // actualizamos el precio del coche.
	$car->save(); // Hacemos los cambios persistentes.
	$car->delete(); // Borramos el coche anterior.
	$cheapest_cars = Car::all(array('conditions' => 'price < 10000')); // Buscamos los coches con un precio menor a 10000.

Como vemos en este ejemplo es muy sencillo trabajar con ActiveRecord. También podemos hacer validaciones y muchas otras cosas, de forma muy sencilla.

Para utilizar esta implementación es necesario disponer de la versión de PHP 5.3 como mínimo. Utiliza namespaces por lo que es sencillo integrarla en tu aplicación.

Hay muchos frameworks para PHP que tienen sus propias implementaciones del patrón ActiveRecord o variaciones del mismo como Symfony, CodeIgniter, FuelPHP, ... aunque esta implementación quizás sea la más fiel al patrón y más similar a ruby on rails que hemos visto.

Actualmente está disponible en los navegadores el API history para tratar los cambios en la URL sin tener que usar el engorroso hash, además de facilitar la agregación a favoritos.

Antes se tenía que guardar el estado de la aplicación en la url a partir del carácter #, o relacionar el estado con alguna clave. Por ejemplo, si nuestra url actual era /app#01 y cambiabamos a /app#02, tendríamos un objeto javascript que guardaría los datos de la aplicación {'01': state1, '02': state2}, mediante el evento window.onhashchange cogeríamos el estado correspondiente de window.location.hash

Con la nueva API tenemos history.pushState, que recibe 3 parámetros:

• data: Un objecto que contiene el estado de nuestra aplicación.
• title: El título del item que se muestra en el historial.
• url (opcional): La nueva url que cargamos y que se muestra en la barra de direcciones.

Para tratar el historial tenemos:

window.addEventListener('popstate', function(event) {
	updateContent(event.state);
});

Con este código le pasamos a una función llamada updateContent los datos del estado de la aplicación a través de la propiedad del evento state

Si queremos reemplazar los datos del estado actual, por ejemplo, porque el usuario a actualizado un formulario, y no queremos que se añada un nuevo estado al historial, disponemos de history.replaceState

// Guardamos el estado inicial de la aplicación
history.replaceState(
	newstate,
	document.title, 
	document.location.href
);

Donde newstate es un objeto con los datos iniciales para nuestra aplicación.

Todo el proceso es transparente al usuario ya que podría parecer que se está cargando una página nueva, en vez de actualizar contenido por ajax.

¿Has creado html alguna vez para enviar en un email? ¿te ha vuelto loco algún cliente de email en particular no mostrando correctamente lo que ponías? dejame adivinar... ¿empezaba por ‘o’ dicho cliente? Bien vamos a intentar dar unas guías para que la próxima vez no sea una pesadilla crear algo que se vea bien en todos los clientes.

1) El doctype del documento es lo primero y de lo más importante, mi consejo es que utilices este:

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

2) Imagínate que las capas (divs) no existen y que volvemos a los inicios de html donde las tablas campan a sus anchas. La primera regla es pensar en tablas, todo el layout se construye con tablas.

3) Especifica siempre la anchura y altura, esta sólo cuando tu contenido vaya en altura fija, de la tabla (table) y celda (td). Las tablas siempre se definen con borde 0, espacio entre celdas 0 y padding entre celdas 0.

<table border="0" cellpadding="0" cellspacing="0" width="686">

4) Utiliza el alineado vertical de la celda para colocar los elementos interiores, donde normalmente pondremos valign=”top”

5) No hagas una gran tabla. Separa elemento colocando nuevas tablas dentro de celdas de otras, como si de divs se tratasen.

Ejemplo simplificado sin atributos en los elementos:

<table>
<tr>
<td>
    <table><tr><td></td></table>
</td>
</tr>
</table>

6) Utiliza estilos en línea con el atributo style.

7) Las imágenes siempre llevan borde 0 (así evitaremos el borde azul si le ponemos un enlace) y display: block para evitar espacios del inline al final de la imágen.

8) Para texto utiliza divs con los tamaños de fuente y paddings que quieras dar en los estilos en línea, y no olvides darle la anchura de sus contenedor:

Ejemplo:

<div style="width: 514px; color: #FFFFFF; font-size: 13px; line-height: 15px; font-family: Arial; margin: 0; padding: 24px 30px 4px 30px;">Texto de prueba</div>

9) Para crear espacios utiliza una imágen, es decir si necesitas crear una línea negra de 10px de altura en el interior de la celda coloca un spacer.gif (imágen transparente de 1x1).

10) Para dar color de fondo utiliza el atributo bgcolor de la celda.

11) No uses color negro ni background negro, pues gmail no lo pinta, para ello utiliza 000001.

Inline-block es un valor de la propiedad display cuya finalidad es hacer que el elemento seleccionado se comporte como un bloque y un elemento en línea. Digamos que es combinar display: inline con display: block. De esta forma nuestro elemento tendrá propiedades de bloque pero no provocará un salto de línea, siempre y cuando entre en el flujo de bloques a dibujar, no superando el ancho disponible.

Si pensamos casos en los que utilizamos float, muchos de ellos se pueden hacer también con inline-block, pero por ejemplo imaginemos este código:

<h1><img src=”icono.png” /> <p>Título</p></h1>

En el navegador veríamos: [icono.png]
Título

Y lo que queremos es que salgan al lado, sin salto de línea. Esto lo podríamos solucionar cambiando la etiqueta “p” por un span o poniéndole la propiedad display: inline. Pero supongamos que queremos utilizar inline-block por los motivos que consideremos. Entonces una buena práctica sería crearnos una clase para ello:

.valign {
    display: inline-block;
    vertical-align: middle;
}

Con esta clase indicamos además del inline-block, que el elemento se centre en altura en el medio del contenedor padre.

Ahora nuestro código html quedaría de la siguiente manera:

<h1><img src=”icono.png” class=”valign” /><p class=”valign”>Título</p></h1>

Si ejecutamos nuestro código en internet explorer 7 veremos que no funciona, pero existe un truco que consiste en el siguiente código:

.valign {
    display: inline;
    zoom: 1;
}

Este código css es solo para internet explorer 7, o bien lo montamos en una hoja de estilos aparte para que se requiera cuando sea necesario o le aplicamos hacks a las propiedades para que solo explorer 7 las reconozca.

La idea de esta clase, nos evita gran trabajo al probar la web en explorer 7, dado que no tendremos que crear un fix para cada elemento con inline-block, pues como hemos visto con una sola clase lo solucionamos todo de forma rápida.

¿Qué es un patrón de diseño?

Antes de comenzar este artículo tenemos que hacer una mención a los patrones de diseño. Estos son soluciones recurrentes a problemas conocidos, definidos mediante 3 partes

• Contexto: Representa el cuándo se produce el problema
• Problema: Representa el qué, es decir, el problema que soluciona
• Solución: Representa el cómo solucionar nuestro problema

Los patrones de diseño se clasifican en distintos grupos. Tenemos patrones de arquitectura, de diseño y de dialecto, dependiendo el tipo de problema que queremos resolver

Estos patrones obtuvieron gran popularidad a partir de la publicación del libro Design Patterns escrito por el grupo Gang of Four y bien utilizados aportan mucha calidad a nuestros productos.

Como no es objetivo de este artículo profundizar mucho en el tema, os recomendamos si teneis curiosidad en consultar el siguiente documento
http://msdn.microsoft.com/es-es/library/bb972242.aspx#XSLTsection124121120120

¿Y un antripatrón de diseño?

Tenemos que tener claro que LOS PATRONES DE DISEÑO NO SON PERFECTOS. Aunque realmente el problema está en la gente que los usa, pues a veces tendemos a tratarlos como verdades universales.

El uso indiscriminado de los patrones de Software, aún cuando el uso de ellos no aporta ningún valor a su desarrollo, se conoce como Pattern Happy, que define a programadores que aprenden un patrón y rápidamente encuentran un lugar donde abusar de él.

¿Has aprendido alguna vez algún patrón de software y quisiste usarlo en ese mismo momento, porque te gustó? ¿Mucho? Entonces eres un amante de los patrones. Los patrones no son siempre la solución adecuada o mejor para un problema.

Los antipatrones son soluciones negativas que presentan más problemas que beneficios. Es importante comprender bien estos antipatrones para conseguir identificarlos y evitarlos cuanto antes.

Los antipatrones de diseño suelen tener nombres graciosos y son detallados con mucho cinismo, lo cual es bueno porque los hace fácil de recordar.

Los antipatrones de diseño se clasifican en tres grandes grupos

• Desarrollo de Software
• Arquitectura de Software
• Gestión de Proyectos de Software

A continuación mostramos una relación de sus nombres originales

Caso concreto. The BLOB. El terror no tiene forma

Este antipatrón de diseño hace referencia a un objeto todopoderoso que tiene un exceso de responsabilidad y crece de manera descontrolada. Si nos basamos en el principio de única responsabilidad este objeto tiene el problema de que se encarga de muchas tareas distintas y el sistema depende completamente de él.

Los problemas que aporta este objeto son

• El objeto es dificil de testear
• El objeto no es reusable
• El objeto no es fácil de hacer cambios
• No es un enfoque orientado a objeto, sino un falso enfoque prodedimental.

Los objetos BLOG (también conocidos a veces GOD Object u objetos todopoderosos) se identifican cuando tienes objetos con muchos atributos y operaciones o cuando existen atributos que no tienen una conexión lógica o falta de cohesión.

La solución para eliminar estos objetos de nuestro sistema es la Refactorización localizando grupos de atributos y responsabilidades y agrupándolos en objetos distintos, estableciendo de forma correcta la relación entre clases.

Referencia

• http://es.wikipedia.org/wiki/Patr%C3%B3n_de_dise%C3%B1o
• http://www.cristalab.com/tutoriales/antipatrones-god-object-en-patrones-de-diseno-orientado-a-objetos-c101018l/
• http://santimacnet.wordpress.com/2010/05/29/patrones-y-antipatrones-de-diseno/
• http://msdn.microsoft.com/es-es/library/bb972251.aspx#EDAA
• http://en.wikipedia.org/wiki/Single_responsibility_principle

OpenTok es una librería Open Source con la que podemos integrar videoconferencia en nuestras aplicaciones web HTML 5 y apps para Android e iOS de una manera relativamente sencilla pudiendo crear salas con múltiples participantes simultáneamente con el requisito de tener conexión a Internet, una webcam y un micrófono.

Los usos de estas aplicaciones HTML 5 de videoconferencia a medida son múltiples, algunos ejemplos serían:

• Integrar servicios de atención al cliente / helpdesk
• Venta de productos y demostraciones online
• Aplicaciones de vídeochat
• Consultas entre profesionales como abogados, arquitectos, médicos, investigadores, etc.
• Impartición de cursos y material didáctico en directo.
• Streaming de vídeo en directo de eventos

Según vayamos a realizar uso del API de OpenTok, podrá ser de uso gratuito o tendrá limitaciones pudiendo llegar a ser de pago en caso de excesiva carga (más información sobre las tarifas).

En los siguientes ejemplos, nos basaremos en los ejemplos oficiales añadiéndoles código PHP y base de datos para que el intercambio de información entre cada cliente sea transparente

Credenciales OpenTok como aplicación de videoconferencia

En primer lugar, deberemos registrarnos como  desarrolladores de Open Tok. Ésto nos proporcionará en nuestro correo electrónico una clave secreta que controlará el uso que hacemos del servicio de video conferencia.
Nos podemos registrar en Open Tok desde éste enlace.

Videoconferencia en aplicaciones HTML 5, jQuery y PHP

Para intercambiar información entre usuarios, haremos uso de PHP y base de datos. En primer lugar, PHP creará una sesión y la guardaremos en base de datos (o cualquier otra manera que prefiramos).
En segundo lugar, todos los clientes que deban conectarse a dicha sesión, obtendrá la información para estar todos en la misma sala.

1.- Descargaremos el API de desarrollo OpenTok para PHP descargando los archivos en una carpeta llamada OpenTok:

• OpenTok/API_Config.php
• OpenTok/OpenTokArchive.php
• OpenTok/OpenTokSDK.php
• OpenTok/OpenTokSession.php

2.- Configuraremos nuestras credenciales OpenTok en el archivo API_Config.php

class API_Config {    
   // Replace this value with your TokBox API Partner Key
   const API_KEY = "!!!!!!!!!!!!!!";     
   // Replace this value with your TokBox API Partner Secret
   const API_SECRET = "#############";     
   const API_SERVER = "https://api.opentok.com/hl";
}

3.- El primer usuario creará la sesión de videoconferencia y su respectivo token, guardándolo en base de datos:

<?php

require("OpenTok/API_Config.php");
require("OpenTok/OpenTokArchive.php");
require("OpenTok/OpenTokSDK.php");
require("OpenTok/OpenTokSession.php");
$apiObj = new OpenTokSDK (API_Config::API_KEY, API_Config::API_SECRET) ;
// Configuramos el objeto
$session = $apiObj -> create_session() ;
$sessionId = $session -> getSessionId() ;
$token = $apiObj -> generate_token($sessionId) ;

?>

Insertaremos las variables $sessionId y $token en base de datos. Ésto nos servirá para que dos usuarios se intercambien entre ellos la información necesaria para que la videoconferencia sea totalmente transparente.

Lo más interesante, es crear una aplicación web que ponga en contacto a varios usuarios entre sí de manera privada mediante algún mecanismo tipo sala de chat, citas, etc.

4.- Después de que el primer usuario cree la sesión, se creará la interfaz. De igual manera, los siguientes usuarios se conectarán con los datos guardados en base de datos (el código es común para todos los clientes):

<!DOCTYPE html>
<html>
<head>
<title>Videoconferencia en HTML 5</title>
</head>
<body>
<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Opentok -->
<script src="http://static.opentok.com/v0.91/js/TB.min.js"></script>
<!-- Sesión -->
<script type="text/javascript">
   var apiKey = '<?=API_Config::API_KEY?>';
   var sessionId = '<?=$sessionId?>';
   var token = '<?=$token?>';
   TB.setLogLevel(TB.DEBUG);
   var session = TB.initSession(sessionId);
   session.addEventListener('sessionConnected', sessionConnectedHandler);
   session.addEventListener('streamCreated', streamCreatedHandler);
   session.connect(apiKey, token);
   var publisher;
   function sessionConnectedHandler(event) {
      var publishProps = {height:120, width:161};
      publisher = TB.initPublisher(apiKey, 'TokVideoStreamUsuario', publishProps);
      session.publish(publisher);
      subscribeToStreams(event.streams);
   }
   function streamCreatedHandler(event) {
      subscribeToStreams(event.streams);
   }
   function subscribeToStreams(streams) {
      for (var i = 0; i < streams.length; i++) {
         if (streams[i].connection.connectionId == session.connection.connectionId) {
            return;
         }
         var divid = 'stream' + streams[i].streamId;
         $("#TokVideoStreamOtrosUsuarios").html("<div id='stream"+streams[i].streamId+"'></div>");
         var publishProps = {height:361, width:482};
         session.subscribe(streams[i], divid);
      }
   }
</script>
<!-- Como me ven a mi otros usuarios -->
<div id="TokVideoStreamUsuario"></div>
<br/><br/>
<!-- Vista de otros usuarios -->
<div id="TokVideoStreamOtrosUsuarios"></div>
</body>
<html>

El comportamiento será mostrar en un Flash pequeño nuestra vista, y luego en grande los usuarios conectados. Conforme se conecten otros usuarios se irán añadiendo otros marcos Flash con los usuarios conectados.

Videoconferencia en apps Android / iOS

En este ejemplo se ha hecho uso de Flash, lo cuál no es compatible con las apps, por lo que para dichas plataformas deberemos hacer uso de la versión nativa del SDK de OpenTok.

Páginas relacionadas

• Streaming de vídeo en directo
• OpenTok Server Side libraries
• OpenTok documentación general

Casi sin darnos cuenta ha habido una enorme revolución en el uso de PHP, el cual ha sido posible gracias a la incorporación de los espacios de nombres. Rápidamente tras esto surgió una herramienta de gestión de dependencias llamada Composer para fomentar la interoperabilidad entre los desarrolles.

Composer es un gestor de dependencias. Esta idea no es nueva, pues está inspirado en otras herramientas de otros lenguajes como npm o bundler.

Gracias a esta herramienta vamos a ser capaces de establecer las dependencias y requerimientos de una aplicación o publicar paquetes generados por nosotros.

Esto se hace necesario por los enormes problemas que hay ahora mismo para la interoperabilidad y cooperación entre frameworks, ya que cada uno nos ofrecía soluciones para lo mismo. Gracias a interfaces comunes y a gestionar las dependencias de forma sencilla se está llegando a este consenso y están brotando grupos de interoperabilidad.

Cómo se usa

Como desarrolladores tendremos un fichero en nuestros proyectos llamado composer.json donde estableceremos las dependencias de una forma parecida a esta:

{
    "require": {
        "monolog/monolog": "1.0.0"
    }
}

De esta forma le estamos diciendo a nuestra aplicación que requerimos la librería monolog. Más aún, le estamos diciendo que necesitamos exactamente la versión 1.0.0. por lo que aunque salgan versiones más modernas de esta rama, no las necesito.

Aquí tenemos la información de cómo podemos realizar el proceso de instalar / actualizar nuestras dependencias http://getcomposer.org/doc/00-intro.md

Reinventar la rueda

Este es un problema muy grande que existe en el desarrollo de software actual, y una de las causas es de no tener la facilidad de publicar nuestras librerías y poder necesitar las publicadas por otros de forma fácil.

Composer es la solución a un problema que no consiguió resolver PEAR. En parte porque éste no conseguía resolver el problema (o no de forma fácil) de tener instalada en la misma máquina diferentes versiones de una librería, ya que podías tener proyectos que dependieran de ambas.

También el problema es que las dependencias no se hacían explícitas de ninguna manera.

Otra diferencia notable, es que no es necesario un proceso de aprobación para que te incluyan tu paquete en el repositorio de Packagist.

Ventajas

Este es un resumen de las ventajas de utilizar esta aplicación

• Puedes indicar exactamente qué necesitas y en qué rama de desarrollo.
• Fomentar el uso de estándares.
• Puedes utilizar paquetes de PEAR
• Existe un repositorio público
• Puedes instalar un repositorio privado
• Podemos establecer procedimientos o llamadas de funciones que se ejecutarán después de realizar operaciones (actualización, borrado, …)

Referencias

• http://getcomposer.org/
• https://packagist.org/
• http://desymfony.com/ponencia/composer
• http://nelm.io/blog/2011/12/composer-part-1-what-why/
• http://nelm.io/blog/2011/12/composer-part-2-impact/
• http://symfony.com/doc/current/components/index.html

LESS es una extensión de CSS

¿Qué significa esto? Que un documento CSS es un documento LESS válido. Esto nos va a permitir seguir trabajando con nuestras hojas de estilo de manera natural y hacer que adaptarnos a LESS sea fácil y ameno.

¿Cómo extiende LESS a CSS?

• Permite el uso de variables. Así, podemos reaprovechar conceptos de colores, rutas. Incluso podemos componer variables con información del proceso que se realiza en el servidor o el tamaño de pantalla accediendo a Javascript (Esto depende un poco de cómo utilicemos LESS, que se explicará más adelante)
• Mixin. El concepto de MIXIN puede ser familiar al de las clases de objetos. Con los MIXINs podemos encapsular funcionalidad. La mayor importancia de esto es que podemos resumir las pesadas reglas de los distintos navegadores en una sola parametrizable. ¡Nunca más habrá que poner -webkit-, -moz-, -ms-, -o, …!
• Funciones. Con el uso de funciones podemos realizar operaciones sobre los colores, tamaños, paddings, etc. Incluso LESS viene de serie con funciones para tratar colores, pudiendo saturar, cambiar la intensidad o incluso calcular el color contrario de uno dado.
• Importaciones: Esto nos aporta mucha modularidad en nuestras hojas de estilo, ya que podemos empezar a funcionar como si tuviéramos paquetes independientes que podemos reutilizar en nuestros proyectos.
• Reglas encadenadas:  Nos permite agrupar funcionalidad en la misma regla, evitando tener que ser tan “verbosos” en nuestras hojas de estilo cuando tratamos elementos que están dentro de otros.

Maneras de implantarlo

La versión de LESS incluye el compilador en versión Javascript. Esto tiene ventajas e inconvenientes. Lo importante es que el procesado lo realiza el cliente: Evita al servidor de realizar una tarea tediosa pero por otra obliga al cliente, haciendo que la página tarde más en cargar y obligándole a tener que tener Javascript para poder ver la hoja de estilos.

Existen otras alternativas de procesar estas hojas de estilo. Algunas de ellas es NODE, Ruby o PHP.

Con PHP, combinando la generación de estas hojas de estilo con un simple sistema de CACHE podemos aprovecharnos de todas estas ventajas.

Aquí vamos a mostrar una idea básica de hacerlo desde PHP con la librería LESSPHP

<?php
// Incluimos las clases necesarias
require 'vendor/autoload.php' ;

// Plantillas que queremos procesar
$ficheros = array ('style/less/style.less', 'style/less/fondo.less') ;
$less = new lessc ();


// Para cada fichero
foreach ($ficheros as $fichero)
{
  // Carga la cache
  $cacheFile = $fichero . '.cache';
  $destFile = $fichero . '.css';

  if (file_exists ($cacheFile))
  {
    $cache = unserialize (file_get_contents ($cacheFile)) ;
  }
  else
  {
    $cache = $fichero ;
  }

  try
  {
    $newCache = $less -> cachedCompile ($cache);
  }
  catch (Exception $e)
  {
    die ('Error ' . $e -> getMessage ()) ;
  }
 

  if (! is_array ($cache) || $newCache['updated'] > $cache['updated'])
  {
    file_put_contents ($cacheFile, serialize ($newCache));
    file_put_contents ($destFile, $newCache ['compiled']);
  }
}

// Plantilla
include ('test.html') ;

Desventajas o pegas

El uso de LESS dependiendo del cliente no me parece una idea correcta pues estamos forzando requerimientos. Con esto haríamos que un cliente sin soporte javascript activado no cargara correctamente las hojas de estilo.

También creo ue es mucho más versatil que podamos manejar nosotros mismos la cache ya que podemos diseñar estrategias de producción y desarrollo mejor adaptadas a nuestras necesidades.

Inversión de Control

Para abordar este tema es necesario en primer lugar que hagamos referencia al término de Inversión de Control.

Para entenderlo, hay un tópico bastante famoso que nos indica que el funcionamiento de esto es parecido a como se trabaja en Hollywood (Principio de Hollywood) con los actores noveles. “No nos llames, nosotros te llamaremos”. Es decir, serán las clases mismas las que se encargarán de pedir los objetos necesarios.

Teniendo esto en mente, podemos entender la inversión de control como el proceso donde los objetos son suministrados a las clases que los necesitan, en lugar de crearlos ellos mismos.

Imaginemos que tenemos una clase Newsletter que necesita enviar correos.

Lo normal, como hasta ahora, podría ser algo como esto:

<?php
class Newsletter {
  protected $mail ;
  function __construct() {
    $this -> mail = New Mailer ('correo@gmail.com', ...) ;
  }
}

Pero esto encierra muchos más problemas de lo que parece a simple vista. Estamos creando una dependencia muy fuerte entre la clase Newsletter y la clase Mail.

¿Qué ocurriría si necesitamos utilizar otro objeto Mailer? ¿Y si nos cambia el usuario y la contraseña? ¿Tenemos que cambiarlo en cada sitio? ¿Y sí en algunas clases tenemos que utilizar el objeto Mailer configurado de una forma y en otras de otro?

Una posible solución propuesta por la Inversión de Control es esta:

<?php
class Newsletter {
  protected $mail ;
  function __construct() {
    $this -> mail = $mail ;
  }
}

Lo que hemos hecho, es pasarle un objeto completamente configurado y preparado para enviar correos eliminando esa fuerte dependencia que existía entre las dos clases.

Ahora mismo estarás pensando que el problema no está solucionado todavía, que todavía has tenido que crear ese objeto Mail, configurarlo a mano y pasárselo a cada objeto que lo requiera. ¡Vamos paso a paso!

Inyección de dependencias

La inyección de dependencias es una forma de Inversión de Control. En el ejemplo anterior hemos visto una posible forma de implementar este patrón de diseño. Vamos a ver ahora ahora una alternativa a esta:

<?php
class Newsletter {
  protected $mail ;
  public function setMailer (Mailer $mail) {
    $this -> mail = $mail ;
  }
  
  public function getMailer () {
    return $this -> mail ;
  }
}

Vemos que la diferencia radica en la forma en que pasamos los objetos. En un caso se los hemos pasado por el constructor y en otros casos se los hemos pasado utilizando métodos SET / GET.

El primer método es el adecuado cuando tenemos que suministrar dependencias que son obligatorias para la clase y el segundo método es el correcto para incluir dependencias opcionales.

Uso de interfaces para definir las dependencias

El siguiente paso para conseguir desacoplar nuestras clases lo conseguimos definiendo interfaces.

Previamente, cuando necesitamos inyectar un objeto, lo hemos realizado indicando el tipo de objeto necesario

public function setMailer (Mailer $mail)

De forma que tenemos la tranquilidad de saber que nos pasaran un objeto de esa clase. Pero eso no es muy flexible tampoco, ya que estamos forzando a crear una dependencia demasiado fuerte.

Lo que podemos hacer es crear una interfaz, que defina las operaciones que tienen que tener nuestros objetos que sirva para enviar correos (Pongamos por ejemplo, un método llamado send)

  public function setMailer (MailInterface $mail)

De esta forma tenemos la dependencia fijada de forma mucho más desacoplada pues nos permitirá de forma muy rápida cambiar de un objeto a otro, siempre que cumpla con esa interfaz.

Contenedor de dependencias

El problema que todavía nos queda es que, fuera de los objetos, tenemos que ir construyendo las dependencias a mano, e ir pasándoselas una a una. Necesitamos centralizar el proceso de crear estas dependencias utilizando un contenedor de dependencias.

Una implementación sencilla de este concepto tendría métodos para obtener objetos de tipo MAIL, sobre demanda.

<?php
class ContenedorDeDependencias {
  public static function getMailer () {
    return new Mailer ('correo@gmail.com', ...) ;
  }
}

Partiendo de este concepto tan básico podemos construirnos un contenedor de dependencias que lea los parámetros de configuración de un fichero externo, que ponga en caché los objetos creados de forma que no tenga que crear los objetos varias veces si son varios clientes los que se lo piden.

Existen componentes completamente terminados y desacoplados que ofrecen esta funcionalidad y mucha más. Aquí tenemos el componente de Inyección de Dependencias de Symfony. https://github.com/symfony/DependencyInjection

Ahora, para utilizar este u otro componente ya podremos hacer algo como:

  ContenedorDeDependencias::getMailer ()

Bibliografía

• http://fabien.potencier.org/article/11/what-is-dependency-injection
• http://en.wikipedia.org/wiki/Law_Of_Demeter
• http://www.hasheado.com/dependecy-injection-en-php.html
• https://github.com/symfony/DependencyInjection

SVG no solo nos permite animar las transformaciones (utilizando animateTransform) sino que también podemos realizar animaciones sobre atributos CSS de los elementos. Concretamente con la etiqueta ‘animate’ y el tipo ‘CSS’, es decir si tenemos un rectángulo de 200x100 de color azul:

<rect width="200" height="100" style="fill:rgb(0,0,255);"/>

Podemos hacer que cambie su color a rojo, añadiendo:

<rect width="200" height="100" style="fill:rgb(0,0,255);">
<animate attributeType="CSS" attributeName="fill" to="rgb(255,0,0)" dur="3s" fill="freeze" />
</rect>

O añadiendo:

<animateColor attributeName="fill" to="red" dur="3s" fill="freeze" />

En el parámetro ‘attributeName’ se indicar el atributo a animar. Por ejemplo podemos hacer que desaparezca realizando un fade o desvanecimiento pasandos 3 segundos:

<animate begin="3s" attributeType="CSS" attributeName="fill-opacity" to="0" dur="2s" fill="freeze" />

Otra característica interesante de SVG es la posibilidad de iniciar las animaciones ante determinados eventos, donde estos pueden ser: click, mousedown, mouseup, mousemove, mouseover, y mouseout.

Por ejemplo podemos hacer que al hacer click sobre el rectángulo, este se rellene de color amarillo:

<set begin="click" attributeName="fill" to="yellow" />

Este último código se debe incluir dentro de la etiqueta rectángulo al igual que hacíamos con el ‘animate’. El elemento ‘set’ de SMIL es una forma corta de realizar un ‘animate’ con duración 0s, por tanto de esta forma cuando se produzca un click sobre el rectángulo este cambiará su color automaticamente.

Hay que tener en cuenta que podemos combinar los eventos con los segundos, es decir, podemos hacer que se inicie 2 segundos después del evento por ejemplo:

<set begin="click+2s" attributeName="fill" to="yellow" />

Los eventos se pueden combinar con los identificadores de otros elementos SVG para así iniciar una animación cuando ocurra un evento particular de otro elemento. Vamos a verlo con el siguiente ejemplo:

<rect id="rect1" width="200" height="100" style="fill:blue;"/>

<rect id="rect2" width="200" height="100" style="fill:red; fill-opacity: 0;">
<animate begin="rect1.mouseover" attributeType="CSS" attributeName="fill-opacity" to="1" dur="1s" fill="freeze" />
</rect>

En este ejemplo tenemos dos rectángulos, uno de color azul y otro de color amarillo con opacidad 0, es decir, que este amarillo inicialmente no se ve. Ahora bien le colocamos al segundo rectángulo dentro una animación para que cambie su opacidad a 1 en 1 segundo y conserve los cambios (‘freeze’). Esta animación se inicia cuando se ejecuta el evento ‘mouseover’ sobre el elemento que tenga el identificador ‘rect1’.

Una de las grandes utilidades de SVG es la posibilidad de realizar animaciones, cambiando los gráficos vectoriales representados a lo largo del tiempo. Existen dos formas de realizar animaciones en SVG, la primera consiste en utilizar elementos 'animation', y la segunda es acceder directamente al DOM del SVG y modificar atributos de los gráficos.

Las animaciones de SVG han sido definidas para permitir SMIL (Synchronized Multimedia Integration Language), esto representa una ventaja ya que se trata de un lenguaje basado en xml, enfocado a realizar presentaciones multimedia con etiquetas para variaciones temporales, transiciones, etc. Este estándar permite organizar todo lo referente a presentaciones multimedia pero en el caso de SVG nos vamos a centrar en la parte de las animaciones.

Vamos a realizar algunos ejemplos para introducir los conceptos: - Primero vamos a ver un ejemplo donde vamos a mover un rectángulo:

>rect width="200" height="100" style="fill:rgb(0,0,255);"/<

En este código tenemos declarado un rectángulo de 200x100 relleno de color azul.

<rect width="200" height="100" style="fill:rgb(0,0,255);">
<animateTransform attributeName="transform" attributeType="XML" type="translate" to=" 50,0" dur="3s"/>
</rect>

Si nos fijamos introducimos dentro del rectángulo la etiqueta ‘animateTransform’ lo que nos permite crear animaciones del elemento transform, el cual recordamos permite realizar escalados, traslaciones, rotaciones, y torsiones. Concretamente aqui estamos realizando una traslación de 50 en el eje x indicada por el parámetro ‘to’, con una duración de 3 segundos indicada por el parámetro ‘dur’. Podemos modificar el parámetro type para realizar una rotación:

<animateTransform attributeName="transform" attributeType="XML" type="rotate" to=" 90" dur="3s"/>

De esta forma rotamos el rectángulo 90º. Ahora bien, todos estos cambio tras terminar se pierden, es decir no se conservan los valores cambiados a no ser que indiquemos en el parámetro ‘filll’ el estado ‘freeze’ de conservación o también podríamos decir congelación.

Supongamos un ejemplo algo más complejo, donde queremos mover primero el rectángulo y luego rotarlo, es decir primero una animación y luego otra. Esto se consigue con el parámetro begin.

<animateTransform id=”anim1” attributeName="transform" attributeType="XML" type="translate" to=" 50,0" dur="3s"/>
<animateTransform begin=”anim1.end” attributeName="transform" attributeType="XML" type="rotate" to=" 90" dur="3s"/>

Como podemos observar hemos añadido el parámetro 'begin' con 'anim1.end', lo que quiere decir que esta animación empezara cuando termine la animación primera (fijémonos que a la primera animación le hemos puesto el nombre id1 como parámetro id para asi poder referirnos a dicha animación). El parámetro 'begin' nos permite indicar un offset de inicio, por ejemplo en vez de indicar que la animación 2 se inicie al terminar la 1 podríamos indicarle begin='3s' para empiece transcurridos 3 segundos desde el inicio global, de esta forma como la animación 1 dura 3 segundos, tendríamos el mismo resultado.

Esto nos da la libertad de encadenar animaciones y crear secuencias. Cabe destacar que los elementos animate no solo se usan con rectangulos, circulos o otras primitivas, sino que se pueden aplicar a agrupaciones (elementos ‘g’) para así poder mover/modificar elementos más complejos con un solo animate.

Actualmente todos los navegadores modernos soportan animaciones mediante este método, aunque explorer presenta algunas pegas a la hora de realizar morphings.

El streaming de vídeo nos proporciona que un evento en directo pueda ser visto por miles de personas simultáneamente, como por ejemplo desde una cámara IP.

Lo más interesante es que el acceso a dicho vídeo sea de manera sencilla, como por ejemplo visualizar el streaming de vídeo desde un navegador web a través de una aplicación Flash o HTML 5.

A continuación vamos a explicar como poner en marcha el servidor Wowza y como leer desde un visor de vídeo Flash para web el streaming, en nuestro caso JWPlayer.

Servidor de streaming de vídeo Wowza

Este software proporciona el servicio de streaming de vídeo bajo demanda con un bajo coste de licencia con medios como Flash u otros reproductores como VLC.

Más información acerca del coste de licencia y del servidor de streaming lo podéis encontrar en su página web http://www.wowza.com

Instalando Wowza en Linux

La instalación es bastante sencilla, en primer lugar bajamos el paquete y lo instalamos, substituyendo la extensión XXX por la distribución de paquetes de nuestra versión de Linux. Durante la instalación nos pedirá el número de licencia, existe una versión de prueba de 30 días y otras de pago que van desde la licencia por días de uso, mensual o permanente:

sudo chmod 777 WowzaMediaServer-3.1.2.XXX 
sudo ./WowzaMediaServer-3.1.2.XXX

Encenderemos y pararemos el servidor con:

cd /usr/local/WowzaMediaServer/bin 
./startup.sh

y pararemos el servidor con

cd /usr/local/WowzaMediaServer/bin 
./shutdown.sh

Corriendo Wowza desde Amazon EC2

Una solución sencilla para desplegar el servidor online es hacer uso de una imagen AMI con el servidor preinstalado. En función del número de usuarios que esperemos que hagan uso del servicio deberemos hacer uso de de un tipo de instancia u otra. Podemos encontrar más información en Wowza Amazon EC2 Support center

Streaming de vídeo de una cámara IP (RTP / RTSP)

Crearemos las carpetas

/usr/local/WowzaMediaServer/applications/miStreaming
/usr/local/WowzaMediaServer/conf/miStreaming

y copiaremos el archivo

/usr/local/WowzaMediaServer/conf/Application.xml

a la carpeta

/usr/local/WowzaMediaServer/conf/miStreaming/Application.xml

haciendo los siguientes cambios en el archivo XML:

1. <StreamType>live</StreamType>

2. <HTTPStreamers>cupertinostreaming, smoothstreaming, sanjosestreaming</HTTPStreamers>
   

3. <LiveStreamPacketizers>cupertinostreamingpacketizer, smoothstreamingpacketizer, sanjosestreamingpacketizer</LiveStreamPacketizers>
   

4. <PlayMethod>none</PlayMethod>

5. <Property>
       <Name>forceInterleaved</Name>
       <Value>true</Value>
       <Type>Boolean</Type>
   </Property>
   

Ahora configuraremos la fuente de streaming y de emisón de ésta:

1. Crear el archivo /usr/local/WowzaMediaServer/content/miCamara.stream y poner la ruta fuente del RTP / RTSP, por ejemplo rtsp://192.168.1.200/vod/mp4:camara.mov
2. Editar el archivo /usr/local/WowzaMediaServer/conf/admin.password y añadir un usuario y contraseña para el gestor de Wowza, por ejemplo:

   usuario clave

3. Opcional: aseguraremos la contraseña (se guarda en texto plano) dándole permisos de sólo lectura al propietario del archivo admin.password mediante:

   chmod 700 /usr/local/WowzaMediaServer/conf/admin.password

4. Iniciar Wowza con el comando:

   cd /usr/local/WowzaMediaServer/bin 
   ./startup.sh

5. Abriremos un navegador e iremos al gestor http://ip-servidor-wowza:8086/streammanager introduciendo el usuario y contraseña elegido previamente
6. Hacer click debajo de miStreaming en [start-receiving-stream]
7. Seleccionar MediaCaster Type: rtp
8. Dentro del campo Stream Name, introduciremos el nombre del archivo de streaming, en nuestro caso miCamara.stream
9. Hacemos click en OK para comenzar el re-streaming

Para probar que la instalación era correcta, abriremos el archivo /usr/local/WowzaMediaServer/examples/LiveVideoStreaming/client/live.html que mostrará un reproductor de vídeo. Introduciremos los siguientes datos para conectarnos al stream, rellenando el campo Server

rtmp://ip-servidor-wowza/miStreaming

y el campo Stream

miCamara.stream

haciendo click en el campo Play

Si no tenemos cámara IP podemos utilizar el fuente RTSP que podemos encontrar en http://www.wowza.com/html/mobile.html

Reproduciendo streaming de vídeo en un navegador web con JWPlayer

El anterior reproductor está bastante bien, pero no nos permite configurar internamente los datos para que la conexión sea transparente al usuario. Para ello vamos a hacer uso de JWPlayer, un reproductor libre que se puede descargar desde http://www.longtailvideo.com/players. Descomprimiremos los archivos y donde estén los archivos JS crearemos un nuevo archivo HTML con el siguiente contenido:

<html>

<head><title>Reproduciendo Streaming de vídeo H.264 con Wowza y JWPlayer</title></head>

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

<div id='container'>Cargando...</div>

<script type="text/javascript">
  var flashvars = {
    file:'miCamara.stream',
    streamer:'rtmp://ip-servidor-wowza/miStream'
  };

  swfobject.embedSWF('player.swf','container','480','270','9.0.115','false', flashvars,
                     {allowfullscreen:'true',allowscriptaccess:'always'},
                     {id:'jwplayer',name:'jwplayer'}
                    );
</script>
</body>
</html>

Es muy importante que este archivo sea llamado desde el navegador web a una URL contenida en un servidor web, como Apache, IIS, Lighthttpd, etc. ya que la configuración de seguridad de Flash no permite ejecutarlo como archivo local.

Fuentes

Parte de la guía de Wowza es una versión reducida de la documentación oficial http://www.wowza.com/forums/content.php?39

Un SVG, como su nombre indica, es un gráfico vectorial escalable. ¿Qué quiere decir esto? Pues que el gráfico se construye con primitivas como líneas, curvas, polígonos, etc. Y de esta forma se puede escalar sin perder calidad. A día de hoy todos los navegadores modernos soportan SVG, pero no todos implementan correctamente todo el API javascript que introducen para un mayor control de los trazos y animaciones.

SVG incorpora una forma de realizar animaciones y transformaciones sobre sus objetos. En el caso de las transformaciones, estas nos permiten trasladar elementos, rotarlos, escalarlos y torcerlos. Por ejemplo:

    <g transform="translate(10,0)">
        ...
    </g>

De esta forma estamos trasladando el contenedor g (g se utiliza para agrupar elementos) 10 puntos en el eje x y 0 en el eje y.

Entre los elementos que podemos definir dentro de un SVG, se encuentran:

- Líneas
- Rectángulos
- Círculos
- Elipses
- Caminos
- Polígonos
- Textos

Por ejemplo podemos definir una línea de la siguiente manera:

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/>

De esta forma dibujamos una línea desde el punto 0,0 de nuestro eje de coordenadas, hata el punto 200,200. En en el estilo le definimos que tendrá una anchura de 2 y será de color rojo. El resto de elemento son similares, es decir, se definen sus propiedades y su estilo, así por ejemplo para definir un rectángulo bastará indicar la anchura y altura que deberá tener. Los caminos (path) son algo más complejos y de los que más libertad nos dan pues se van construyendo con una serie de construcciones como curvas de bezier o simples líneas.

Una vez tengamos el SVG dibujado no hay que olvidar definir su viewbox, es decir la anchura y altura que tiene inicialmente, para posteriormente indicar la anchura y altura de visualización actual. Ejemplo, si nuestro gráfico se hace pensando para 800x600, entonces nuestro viewbox será:

viewbox="0 0 800 600"

Siendo los dos primeros valores, el mínimo valor de "x", y el mínimo valor de "y". Y si nuestra pantalla actualmente es la de un móvil de 500x400, entonces en los atributos "width" y "height" del svg deberemos indicarle dichos valores, para así automáticamente el navegador poder escalar el gráfico correctamente.

Open graph es una iniciativa de Facebook que pretende mediante un API basada en metas obtener información de más objetos que los típicos: personas, fotos, eventos y páginas, y sus relaciones entre ellos. Para ello se crea una aplicación (app) que contiene una serie de objetos sobre los que se puede realizar una serie de acciones, por ejemplo si tenemos el objeto receta, podemos realizar la acción de cocinarla, y de esta manera que aparezca reflejado en nuestra línea temporal que hemos cocinado dicha receta.

No vamos a entrar en el detalle de ver esto a fondo, pero vamos a ver que podemos emplear dichos metas para que Facebook interprete mejor nuestras páginas web. Puesto que normalmente cuando incluimos un botón de “Me gusta” en nuestra página web, no nos paramos a pensar en que se basa Facebook para sacar un texto de descripción de la página compartida, así como la foto que muestra.

Por ello, habrá ocasiones en las que de la casualidad y coja justo el texto y la foto que deseamos, pero por norma general esto no suele ser así, por ello debemos indicarle a Facebook que texto y qué foto debe coger.

<meta property="og:title" content="Stuffed Cookies" >
<meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" >
<meta property="og:description" content="The Turducken of Cookies" >
<meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

He aquí los metas básicos que vamos a utilizar. De esta forma indicamos un título, una foto, una descripción y la dirección correcta. Ahora cuando se haga click en un “Me gusta” tendremos el control sobre que aparecerá en Facebook.

¿Por qué es importante generar documentación?

La programación es, generalmente, un entorno colaborativo, especialmente en proyectos de cierta emvergadura donde varios programadores y analístas trabajan de forma conjunta.

Cada programador tiene una forma concreta de comentar y de programar, y esto es un inconveniente porque dota de mucha hetereogeneidad a los proyectos haciendo que los programadores sepan dificilmente para qué son determinadas clases o funciones. Y más grave todavía es cuando hay que volver a retomar un proyecto hace tiempo olvidado.

Más motivos para utilizar una documentación sistemática es la tendencia actual del software de ser fabricarlo como si fueran piezas que fueran fácilmente interconectadas, por lo que una aplicación web por ejemplo, pudiera integrar fácilmente un foro o un blog. Generar una documentación estándar da muchas facilidades al entendimiento del código.

Además, generar una documentación que siga un cierto estándar nos va a permitir automatizar su generación en otros documentos como páginas HTML o PDFs además de poder integrarlo con los famosos entornos IDE de programación de forma que conforme escribimos veamos la descripción de la función, así como sus parámetros.

¿Qué es PHPDocumentor?

$ sudo apt-get install php-pear

$ pear channel-discover pear.phpdoc.org
$ pear install phpdoc/phpDocumentor-alpha

$ sudo apt-get install php-xsl
$ sudo apt-get install graphviz

$ phpdoc -d . -t docs

DocBlocks

La documentación de PHPDoc está basada en bloques de comentarios conocidos como DocBlocks.

En este ejemplo, vamos a ver como es la anatomía de uno de estos bloques

/**
 * This is the short description for a DocBlock.
 *
 * This is the long description for a DocBlock. 
 *
 * * Markdown style lists function too
 * * Just try this out once
 *
 * The section after the long description contains the tags; 
 * which provide structured meta-data concerning 
 * the given element.
 * @author  Mike van Riel <mike.vanriel@naenius.com>
 *
 * @since 1.0
 *
 * @param int    $example  This is an example description.
 * @param string $example2 This is a second example.
 */

Este bloque se divide en los siguientes apartados:

• Descripción corta
• Descripción larga
• Tags

Existen dos tipos principales de DocBlocks. A nivel de fichero y a nivel de elemento. Los bloques a nivel de fichero definen el funcionamiento o el propósito del fichero y los de nivel de elemento comentan una determinada clase o función.

A continuación vamos a ver la forma recomendada de utilizar estos bloques en un fichero de ejemplo.

<?php
/**
* This is a file-level DocBlock
*
* No warning will be raised.  This is the recommended usage
* @package SomePackage
*/

 

/**
* This is a not a file-level DocBlock, because it 
* precedes a class declaration
* This is also the recommended usage
* @package SomePackage
*/
class foo {}
?>

Vemos aquí como el primer bloque es a nivel de fichero e indica el atributo de package (paquete). Y el siguiente bloque de documentación se refiere a la clase foo.

Paquetes

El concepto de paquete, como tal, no existe en PHP, pero desde la documentación no es posible indicar un paquete de forma que podamos agrupar conceptos similares. Si especificamos un paquete en el un bloque de documentación todas las funciones, clases, etc serán agrupadas juntas. En el caso de no especificar ningún paquete todo irá al paquete DEFAULT.

Referencias

• http://manual.phpdoc.org/
• http://www.phpdoc.org/

A veces necesitamos esperar a que se carguen imágenes para poder realizar alguna acción, como animaciones en canvas. Como es una tarea que se repite muchas veces y no siempre es fácil de controlar aquí dejo una función que os ayudará.

	function ImageManager() {
		this._queue = [];
		this._count = 0;
	}
	ImageManager.prototype.add = function (url) {
		if (url instanceof Image) {
			var url = url.src;
		}
		this._queue.push(url);
	}
	ImageManager.prototype.waitForAll = function (callback) {
		var self = this;
		for (var i=0; i<this._queue.length; i++) {
			var url = this._queue[i];
			var img = new Image();
			img.onload = function () {
				self._count++;
				if (self._count == self._queue.length) {
					callback();
				}
			}
			img.src = url;
		}
	}

Lo que hace esta función es crear una cola de imágenes y un contador inicializado a 0. A medida que una imagen se carga el contador aumenta y cuando alcanza el valor del número de imágenes en cola se llama a la función "callback".

El uso es muy sencillo. Iremos añadiendo las imágenes que necesitemos que estén precargadas y cuando ya las tengamos todas llamaremos al método waitForAll pasándole como parámetro una función que será la que comenzará con nuestro código. Al método add le podemos pasar tanto las rutas de las imágenes como un objecto Image.

	var init = function () {
		// Aquí irá nuestro código principal
	}
	
	var im = new ImageManager();
	im.add('image1.png');
	im.add('image2.png');
	var img = new Image();
	img.src = "image3.png";
	im.add(img);

	im.waitForAll(init);

Canvas es una etiqueta introducida en HTML5 que sirve generar gráficos dinamicamente a través de su API javascript. Pueden ser tanto gráficos estáticos como animaciones

El elemento canvas tiene 2 atributos básicos width y height, que son el tamaño del lienzo, por defecto su valor es de 160

	<canvas id="micanvas" width="640" height="480">No puedes ver esto</canvas>

Dentro del elemento canvas no puede ir nada, ya que los gráficos los generamos a través de javascript, pero podemos introducir un texto o una imagen, para indicar a los usuarios de un navegador que no lo tenga implementado, que se actualicen, por ejemplo. El navegador cómo no interpretará el canvas, nos mostrará el contenido que le pongamos dentro.

El canvas también se puede usar para dibujar gráficos en tres dimensiones, pero en este artículo nos centraremos en su contexto 2D.

Lo primero que tenemos que hacer para empezar a dibujar es obtener el contexto:

	var canvas = document.getElementById('micanvas');
	var context = canvas.getContext('2d');

El contexto nos permitirá dibujar primitivas sobre el canvas como rectángulos, círculos, arcos, curvas, líneas y tambíen cargar imágenes externas dentro de él. Podemos ver una referencia completa aquí

Ejemplo:

	var image = new Image();
	image.src = "ruta/a/la/imagen.png";
	context.clearRect(0, 0, 640, 480);
	context.save();
	context.drawImage(image, 100, 200, 50, 50);
	context.restore();

En este ejemplo hemos cargado una imagen sobre el canvas. Primero creamos en objecto image y establecemos su ruta. Esta imagen debe estar precargada para que se dibuje correctamente. Luego con clearRect limpiamos todos los píxeles del canvas. Con el método drawImage ponemos la imagen sobre el canvas, en la posicion (100, 200) y con un tamaño de 50x50

Haciendo esto varias veces ayudándonos de requestAnimationFrame es como crearemos animaciones.

Quedan dos métodos por explicar, save y restore. Con el método save lo que hacemos es guardar el estado del contexto, luego hacemos toda clase de dibujos y transformaciones para que al llamar al método restore, volvamos al estado anterior y podamos volver a empezar de cero.

Para crear animaciones en HTML5 tenemos varias opciones. Una es crearlas directamente en la hoja de estilos con las transiciones de CSS3, otra es con la programación de scripts y el uso de requestAnimationFrame

Transiciones

Las transiciones de CSS3 son más apropiadas para la creación de efectos visuales. Por ejemplo, podemos hacer que un elemento se mueva cuando el ratón esté dobre él, para eso tenemos que definir su posición en el estado normal y en su estado "hover". Definimos la transición, el tiempo de la duración, y el navagador se encargará de animar ese elemento por tí. Veamos un ejemplo simple.

	#elemeto {
		position: relative;
		left: 0;
		transition: left 500ms;
	}
	#elemento:hover {
		left: 10px;
	}

A una transición le podemos especificar la propiedad que queremos animar "transition-property: left;", la duración de la animación "transition-duration: 1s;", la función que realizará la animación "transition-timing-function: linear;" y el retardo a la hora de empezar "transition-delay: 2s;"

requestAnimationFrame

Para animaciones más complejas como presentaciones o videojuegos no nos llega con usar transiciones de CSS3, necesitamos controlar mejor lo que vamos a hacer. La idea es crear una función de dibujo que se ejecute cada cierto tiempo. Antes de la llegada de HTML5 usaríamos las funciones de javascript setTimeout o setInverval, pero ahora tenemos requestAnimationFrame que nos proporciona algunas ventajas. Estas ventajas son la creación de animaciones suaves y un mejor aprovechamiento de los recursos.

Los navegadores implementan esta función de manera que las animaciones se sincronicen con el refresco de pantalla, generalmente unos 60hz, lo que hace que las animaciones se vean más suaves. También hacen que, por ejemplo, al cambiar de pestaña en el navegador, la animación se pare, dejando de consumir recursos de CPU y de memoria.

Su uso es muy sencillo:

	var requestId = 0;
	var animationStartTime = 0;

	function animate(time) {
		document.getElementById("animated").style.left = (time - animationStartTime) % 2000 / 4 + "px";
		requestId = window.requestAnimationFrame(animate);
	}
	function start() {
		animationStartTime = Date.now();
		requestId = window.requestAnimationFrame(animate);
	}
	function stop() {
		if (requestId)
			window.cancelAnimationFrame(requestId);
		requestId = 0;
	}

Para terminar aquí dejo un polyfill para hacer que requestAnimationFrame funcione en cualquier navegador:

(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
        window.cancelAnimationFrame = 
          window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
    }
 
    if (!window.requestAnimationFrame)
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (currTime - lastTime));
            var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
              timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
 
    if (!window.cancelAnimationFrame)
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
}());

En muchas ocasiones necesitamos colocar en una página web un triángulo, ya sea para señalar algo con una flecha, en una paginación de una galería o listado de cualquier cosa, o incluso para ponerle a una capa esquinas con cierta forma poligonal (donde obviamente no son redondeadas).

Es posible que de primeras pensemos en colocar imágenes con dichas formas, pero hay que tener en cuenta el papel de los bordes en las capas HTML. Los bordes al formarse se generan en ángulo, es decir, si a una capa le ponemos anchura 0 y altura 0, y le damos tamaño a sus bordes veremos cómo estos tienden hacia el centro de la capa. Si hacemos esto, veremos un cuadrado normal y corriente.

Supongamos el siguiente código HTML:

< span id="flecha" >

Si le asignamos el siguiente código CSS:

#flecla {
display: block;
width: 0;
height: 0;
border: 10px solid red;
}

Esté código genera un cuadrado rojo con anchura 10 px. Ahora bien el truco consiste en los bordes transparentes. Si hacemos que 3 de los 4 bordes sean transparentes, entonces conseguiremos la flecha buscada, concretamente una flecha con ángulos de 45º.

Esto lo conseguimos añadiendo al CSS anterior:

border-width: 10px;
border-color: red transparent transparent transparent;

Esto genera una flecha hacia abajo. Si el color rojo lo colocamos a la derecha entonces tendremos una fecha hacia la izquierda, es decir, siempre se genera la punta hacia el centro de la capa, el lado contrario a donde coloquemos el color. Eso sí no solo se pueden hacer formas triangulares de 45º, estos ángulos se pueden variar jugando con los tamaños de los bordes.

Ejemplo:

border-width: 40px 10px 10px 10px;

Jugando con el tamaño del lado donde le damos el color haremos que la flecha se haga más larga, imitando a un banderín. Esto se aplica a todos los lados, es decir si al bottom le incrementamos el tamaño este se hará más largo por tanto si lo reducimos a 0 alcanzaremos un ángulo de 90º.

Es posible llegar a realizar la bandera de Inglaterra solo con CSS, puesto que se compone de una serie de triángulos. Para colocar una capa con esquinas triangulares, basta poner dicha forma con posición absoluta y colocar otra capa extra como lateral para cubrir donde termina la forma triangular.

Para detectar la orientación de una foto sacada con tu cámara digital deberemos obtener la información Exif (Exchangeable image file format) de la foto. Esta información está presente en los formatos JPEG y TIFF generados por la mayoría de las cámaras digitales.

Con PHP esto es muy sencillo si tenemos instalada la extensión Exif. Lo que tenemos que hacer es detectar la información de la orientación de la imagen y rotarla usando la librería GD.

Vamos a ver un ejemplo de como hacerlo:

class Photo {

	private static function mirrorImage ( $imgsrc ) {
		$width = imagesx ( $imgsrc );
		$height = imagesy ( $imgsrc );

		$src_x = $width -1;
		$src_y = 0;
		$src_width = -$width;
		$src_height = $height;

		$imgdest = imagecreatetruecolor ( $width, $height );

		if ( imagecopyresampled ( $imgdest, $imgsrc, 0, 0, $src_x, $src_y, $width, $height, $src_width, $src_height ) ) {
			return $imgdest;
		}

		return $imgsrc;
	}

	public static function adjustPhotoOrientation($full_filename) {        
		$exif = exif_read_data($full_filename);
		if($exif && isset($exif['Orientation'])) {
			$orientation = $exif['Orientation'];
			if($orientation != 1){
				$img = imagecreatefromjpeg($full_filename);

				$mirror = false;
				$deg    = 0;

				switch ($orientation) {
					case 2:
						$mirror = true;
						break;
					case 3:
						$deg = 180;
						break;
					case 4:
						$deg = 180;
						$mirror = true;  
						break;
					case 5:
						$deg = 270;
						$mirror = true; 
						break;
					case 6:
						$deg = 270;
						break;
					case 7:
						$deg = 90;
						$mirror = true; 
						break;
					case 8:
						$deg = 90;
						break;
				}
				if ($deg) $img = imagerotate($img, $deg, 0); 
				if ($mirror) $img = self::mirrorImage($img);
				
				imagejpeg($img, $full_filename);
			}
		}
		return true;
	}

	
}

Ahora solo tenemos que hacer Photo::adjustPhotoOrientation($ruta_absoluta_de_la_imagen) y ya tenemos la foto rotada correctamente.

Cada vez, son más los dispositivos que utilizan el sistema operativo Android. Generalmente, para la gestión de nuestro correo electónico siempre empleamos las opciones que vienen por defecto en el aparato para la creación de cuentas de correo, ya que nos permiten una configuración automática en unos pocos segundos. El problema de esto, es que estas opciones están limitadas a proveedores de correo conocidos o más populares, como hotmail, google mail, etc.

Si queremos configurar una cuenta de correo alternativa a la que ya tenemos por defecto, como por ejemplo la cuenta de la empresa, debemos utilizar alguna aplicación alternativa, ya que las empresas, suelen tener su propio servidor para la gestión del correo con sus propios parámetros de configuración. Dependiendo de la versión de Android, es posible que se disponga de una aplicación predeterminada de sistema alternativa a la configuración automática mediante asistente, que nos permite configurar nuestro correo, pero como en principio, no se sabe que versión del sistema tendrá el usuario, hay que buscar una alternativa que nos permita, configurar el correo de forma manual en función de los parámetros de nuestro servidor.

MAILDROID

MailDroid, es una aplicación que nos permite configurar cualquier cuenta de correo electrónico, ya sea de un proveedor conocido como hotmail, google mail, o de un servidor de nuestra empresa. Esta aplicación funciona correctamente en versiones de android 2.2 y 2.3 (ésta última la hemos usado para la configuración de una cuenta de empresa y funciona correctamente).

¿Cómo instalo MailDroid en mi tablet o smartphone Android?

Teniendo acceso a Android Market, basta con buscar "maildroid" y saldrá como primer resultado. Lo descargamos y una vez instalado lo arrancamos y aceptamos la licencia de usuario final. La aplicación está en inglés.

¿Cómo configuro mi cuenta de correo de la empresa o de cualquier otro servidor?

Una vez que hemos instalado la aplicación y aceptado los términos de licencia, nos aparecerán las opciones de configuración para ingresar nuestros datos de la cuenta de correo y el modo de configuración que queremos emplear. Disponemos de tres opciones: Automática, manual e importar configuración.

Automática. La configuración automática, evita al usuario tener que conocer parámetro alguno sobre la configuración de su servidor entrante y saliente de  correo. Esta opción solo funciona con servidores de correo conocidos o que utilizan una configuración estándar.

Manual. Esta  opción es la que se deberá utilizar para  configurar una cuenta de correo que prtenezca a un dominio propio y no estándar, para ello necesitamos conocer los siguientes parámetros del servidor:

• Servidor entrante: Define el servidor que utilizará nuestra cuenta para recibir los correos (IMAP o POP3).
• Puerto y seguridad del servidor entrante. Debemos conocer cual es el puerto que utiliza el servidor de correo y si requiere de algún tipo de seguridad (SSL o TLS).
• Servidor de correo Saliente (smtp) define el servidor de correo que se utilizará para el envío de correos.
• Puerto y seguridad del servidor de correo saliente. Debemos conocer el puerto que utiliza el servidor de correo smtp (normalmente es el 25) y si requiere cifrado (TLS o SSL). además, tenemos que marcar la opción que indica: usar los mismos credenciales, para que utilice los mismos datos de usuario y contraseña para el servidor de correo saliente SMTP que para el servidor de correo entrante.

Destacar que se está empleando la configuración mediante el protocolo IMAP, pero para el protocolo POP3, sería similar.

Una vez que tenemos todos los parámetros de configuración establecidos y continuamos con el asistente, se validará nuestra configuración con un correo de prueba. si todo funciona bien, tendremos una patalla principal, con la bandeja de entrada de nuestro correo.

En esta pequeña guía se explicará como importar los correos que tengamos en otra cuenta a una cuenta GMail en Google Apps.

En primer lugar se necesita un cliente de correo para configurar las dos cuentas, tanto aquella desde la que queremos exportar como la cuenta destino de Google Apps. En este caso se utilizará Microsoft Outlook, aunque también se pueden utilizar otros clientes de correo como Thunderbird.

Una vez que ya tenemos instalado el cliente de correo procedemos a las configuración de las cuentas origen y destino. Es importante destacar que para la cuenta de Google Apps se debe habilitar el protocolo IMAP en la configuración de la cuenta.

Para habilitar el protocolo IMAP vamos a la pantalla de configuración de nuestra cuenta de Google Mail, y en la pestaña de Reenvío y correo POP/IMAP, habilitamos el protocolo IMAP como se muestra en la imagen.

Una vez que hemos configurado el correo de Google Apps vamos a Outlook. En la pantalla principal del programa vamos a Herramientas > Configuración de Cuenta y nos aparecerá una pantalla como esta:

A continuación creamos una nueva cuenta. (Opción Nuevo) En la patalla que se despliega seleccionamos la opción Microsoft Exchange, POP, IMAP o HTTP y en la siguiente la opción de configuración manual y seleccionamos la opción Correo electrónico de Internet y pasamos a la siguiente pantalla:

Datos para la configuración de la cuenta de correo GMail

Una vez en esta pantalla introducimos los datos que nos pide. Hay que tener en cuenta que los datos que se tienen que introducir en este paso, dependen del proveedor de correo al que pertenezca la cuenta, pero se hace de forma idéntica para todas las cuentas que deseemos configurar. Para el caso de una cuenta de Google Mail, los parámetros a introducir son los siguientes:

• Su nombre: Un nombre o alias. Ej: Mario.

• Dirección de Correo Electrónico: La dirección de la cuenta a configurar ej: info@imaginanet.com

• Tipo de cuenta: En nuestro caso IMAP, aunque también se puede utilizar el protocolo POP3.

• Servidor de correo entrante: imap.googlemail.com

• Servidor de correo saliente (SMTP): smtp.googlemail.com

• Nombre de usuario y Contraseña: Datos de la cuenta de correo a configurar.

• En el botón más configuraciones podemos acceder a opciones avanzadas para configurar el tipo de cifrado que necesita nuestra cuenta tanto para el servidor de correo entrante como el de correo saliente, así como los puertos sobre los que trabajan los mismos.

  • Puerto imap: 993

  • Puerto smtp: 465

¿Cómo importamos el correo electrónico de GMail a otra cuenta?

Una vez que ya hemos configurado todos los parametros de la cuenta pulsamos en el botón Probar configuración de cuenta y si no hay errores, sólo queda finalizar el asistente de configuración.

Este proceso se repetiría tantas veces como cuentas necesitemos configurar. Una vez que tengamos las dos cuentas configuradas, la de Google Apps y la cuenta de la que queremos importar el correo, basta con seleccionar la bandeja de entrada y las carpetas que tengamos en el correo origen y arrastrar el contenido de las mismas a la cuenta de Google.

Google Apps es un conjunto de aplicaciones que nos permite organizar de forma sencilla todo nuestro trabajo, y la comunicación entre los distintos trabajadores con diversas herramientas para la gestión del correo electrónico, mensajería instantánea, planificación de reuniones y tareas, generación de documentos hojas de cálculo, etc. Además, también dispone de mecanismos de seguridad para empresas mas específicos para el control de cuentas con contraseñas personalizadas y restricciones de acceso específicas.

Existen dos ediciones de Google Apps: la edición gratuita, que nos permite probar el conjunto de herramientas, pero de forma mas limitada, y la edición Business, que contiene todo el potencial de Google Apps pensado para empresas.

Google APPS Gratuito

Esta es una versión básica de Google Apps con las herramientas principales de comunicación, así como las de generación de documentos, además de tener la posibilidad de crear blogs o de publicitar la empresa o el dominio que se desee. Con esta edición podemos probar durante 30 días y con un limite máximo de 10 usuarios herramientas como Google Mail, Google Calendar, Google Docs, Google Sites, Blogger, AdWords, etc.

Google Apps for Business

Esta es una edición de pago que nos ofrece además de lo anteriormente mencionado, una serie de ventajas frente a su edición gratuita, como son:

• Sistemas de seguridad avanzados. Nos permite emplear mecanismos como SSO o SSL, además de tener requisitos de contraseña personalizada y otras funciones.

• Mayor espacio de almacenamiento por usuario e interoperabilidad entre dispositivos móviles y el PC. Se dispone de una capacidad de almacenamiento de 25 GB por usuario y de la posibilidad de sincronizar el correo y de Google Mail y las tareas de Google Calendar con dispositivos móviles como Black Berry, IPhone o sistemas Android.

• Fiabilidad. Google garantiza un tiempo de funcionamiento del sistema de un 99,9%, por lo que siempre tendremos acceso a nuestra cuenta. También se cuenta con replicación síncrona.

• Aplicaciones adicionales para empresas como Google Video for Business y Google Groups for Business.

• Acceso a las aplicaciones de mensajería para móviles de calendario y de correo electrónico.

• Asistencia técnica, ya sea telefónica o por correo electrónico, siendo ininterrumpida en caso de incidencias graves. Además también dispone de un servicio de asistencia online para que el propio usuario pueda resolver las incidencias.

• Sin limite de cuentas de usuario, ya que podemos crear tantas cuentas como se necesiten.

Costes del servicio.

Podemos contratar Google Apps for Bussines en dos modalidades, una mensual y otra anual.

Modalidad Mensual. En este caso, pagamos un precio de 4 € por cuenta de usuario que creemos al mes, de forma indefinida a menos que demos de baja el servicio.

Modalidad Anual. En este caso el coste es de un total de 40 € anuales por cuenta de usuario creada, siendo 8 € menor que en el caso de la modalidad mensual, pero con la condición de que se debe mantener el servicio durante un año.

Herramientas de uso habitual

A continuación se explicará brevemente lo que nos ofrecen algunas de las herramientas mas utilizadas dentro de Google Apps para que se tenga una mejor visión sobre el funcionamiento de este sistema. Se debe tener en cuenta, que algunas de las opciones que ofrecen estas herramientas sólo están disponibles para la Edición Business de Google Apps.

Google Mail

Esta aplicación nos permite gestionar nuestro correo electrónico de forma sencilla pudiendo clasificar nuestros mensajes en función de un criterio de etiquetas que nos permite saber cuales la importancia de los mismos, pudiendo organizarlos por medio de estas etiquetas de relevancia. Además, también disponemos de un sistema de búsqueda que utiliza el motor de google para encontrar fácilmente los mensajes de correo electrónico .

Por otra parte, se dispone de accesibilidad total desde cualquier dispositivo ya sea móvil o PC, ya que es posible acceder mediante la web de Google, o bien mediante la aplicación movil de Google Mail para Android, IPhone o BlackBerry.

Por último, el filtro antispam nos permite evitar el correo malicioso y evita que se pierda tiempo eliminando mensajes basura.

Google Calendar

Google Calendar es una aplicación de planificación de reuniones y proyectos que está totalmente integrada con Google Mail, por lo que su acceso es rapido y sencillo.

¿Qué nos permite hacer Google Calendar?

Con esta aplicación podemos comprobar fácilmente la disponibilidad de los empleados para las a la hora de asignar tareas o concretar reuniones con la posibilidad de superponer varios calendarios al mismo tiempo para poder tener una visión cronológica global de todos los eventos asignados a todos los empleados.

Por otra parte, tambien se dispone de una gran accesibilidad, gracias a la integración con el correo electrónico y el acceso mediante dispositivos móviles. Además se pueden utilizar los calendarios de manera compartida donde el administrador puede gestionar los permisos que tienen los usuarios con los que comparte el calendario, de forma que se garantiza la seguridad y la privacidad. También es posible publicar calendarios de forma sencilla en la web de la empresa.

Google Docs

Esta herramienta es un conjunto de aplicaciones ofimáticas que nos permiten editar y crear documentos, presentaciones , dibujos y hojas de cálculo desde el navegador sin necesidad de instalar complemento o aplicación alguna.

Nos ofrece un entorno que puede compartirse con múltiples usuarios que tendrán una serie de permisos gestionados por el administrador que comparte el documento, además del hecho de que estos documentos podrán ser editados de forma simultanea por todos los usuarios al mismo tiempo, lo que permite que cada usuario tenga sus propias anotaciones dentro del documento y los demás puedan guiarse por ellas para una mejor cohesión a la hora de trabajar.

Al igual que Google Calendar, Google Docs, nos permite acceder a nuestros documentos desde cualquier parte, incluso desde el teléfono móvil, teniendo la posibilidad de trabajar sin conexión a internet. Además, se realiza una copia de seguridad de todos los archivos, para garantizar que nunca se pierda información, o en su caso, minimizar las perdidas.

También es posible utilizar la aplicación Google Groups para compartir documentos directamente a grupos de personas en lugar de a una persona concreta, haciendo mas fácil y rápida la gestión de usuarios que tienen acceso a los distintos documentos.

Google Talk

Es una aplicación de mensajería, que funciona de forma similar al Messenger de Microsoft o Skype, pero para cuentas de Google Mail. Nos permite realizar llamadas de voz y enviar mensajes instantáneos a todos los contactos que tengamos en nuestra cuenta de Google siempre que estos tengan una cuenta de Google también, para asegurar todas las funcionalidades de la aplicación. Es posible utilizar la funcionalidad de mensajería instantánea de Google Talk con otros usuarios que tengan cuentas de Windows Live o Yahoo por ejemplo, pero no se garantiza que las funcionalidades respondan igual de bien por cuestiones de compatibilidad entre protocolos de comunicación, ya que para estos casos se utiliza una pasarela que hace posible la comunicación entre cuentas, pero existen algunos problemas de funcionamiento.

Google Talk, dispone de una versión descargable para PC y Android que contiene todas las funcionalidades mencionadas. Existe una versión web integrada con el correo electrónico que tiene función de chat para poder enviar mensajes instantáneos a tus contactos. Además, también se puede instalar un complemento para Google Talk para poder realizar videollamadas.

Google Sites

Esta aplicación nos permite crear pequeños sitios web donde podemos compartir enlaces, documentos, vídeos, etc. Se facilitan plantillas para diferentes tipos de web que nos hacen mas sencilla la creación de nuestro sitio en función de para qué lo queramos, ya sean Intranets, proyectos, entre otros.

Esta aplicación nos puede ser útil para centralizar por ejemplo todo el contenido relacionado con un proyecto concreto.

Además de las aplicaciones que se han descrito en este documento, disponemos de otras que también pueden ser de interés, como Google Video, Google AdWords (para cuestiones de publicidad sobre la empresa) o un Maket Place para las aplicaciones de la empresa.

Existen multitud de herramientas para instalar y configurar fácilmente un servidor Apache con MySQL tanto en Windows como en Linux, que nos permiten tener un sistema local para hacer nuestras pruebas en el mundo de la web, pero a nivel local y sin los problemas de seguridad que puede dar un servidor real.

El uso de herramientas de este tipo viene bien cuando no queremos complicarnos demasiado con la configuración de PHP, MySQL y Apache. De esta forma tenemos una configuración básica de apache sin problemas y perféctamente funcional. Herramientas como EasyPHP (http://www.easyphp.org/) para Windows o XAMPP para Linux que se puede encontrar en la web http://sourceforge.net, son algunos ejemplos de ésto.

En esta primera parte se va a explicar lo necesario para instalar un servidor Apache en Linux, así como las diferentes opciones de configuración del servidor de las que disponemos en el fichero httpd.conf

Instalación de Apache en Linux

A día de hoy los gestores de paquetes disponen de la mayoría de aplicaciones en los repositorios que vienen de serie en las distintas distribuciones, especialmente si utilizamos Ubuntu que facilita bastante la instalación de aplicaciones en nuestro sistema.

En nuestro caso utilizaremos el gestor de paquetes apt-get que nos permitirá de forma sencilla descargar e instalar una versión de Apache. Para instalar nuestro servidor apache ejecutamos:

sudo apt-get install apache2

Una vez que ha terminado el proceso ya tenemos nuestro servidor Apache en funcionamiento. Ahora tenemos que comprobar que el servidor responde a nuestras peticiones. Para eso abrimos nuestro navegador web habitual e introducimos la dirección http://127.0.0.1. De esta forma obtendremos una web con un texto que dice: IT'S WORKS! Esto indica que Apache está respondiendo a nuestras peticiones.

Funcionamiento básico del sistema de directivas de Apache. Ejemplo de configuración

Ahora que ya disponemos de nuestro servidor, tenemos que saber como configurarlo correctamente para lo que queramos hacer. Para ello, vamos a describir el funcionamiento básico del fichero httpd.conf que podemos encontrar normalmente en la ruta /etc/apache2/httpd.conf.

La configuración de Apache se basa en un sistema de directivas que se aplican de forma general o bien en secciones concretas (un directorio o una IP por ejemplo). Todos los parámetros que se le pueden aplicar al fichero httpd.conf se denominan directivas. Estas directivas son de dos tipos:

Directivas generales. Las directivas generales son aquellas que se aplican a todo el servidor, de forma que lo que indique afectará a toda petición que se realice a dicho servidor. Por ejemplo si en nuestro fichero httpd.conf indicamos lo siguiente.

DirectoryIndex index.php

esta directiva le esta diciendo al servidor que el fichero a buscar cuando el cliente solicita una web a este servidor, será index.php. Es posible añadir mas de un fichero separado por espacios.

Directivas de sección. A diferencia de las generales, las directivas de sección solo afectan a partes concretas del servidor (un directorio, un dominio o subdominio, etc.).

Se puede decir que las directivas de sección nos permiten agrupar directivas generales, y que mientras que las primeras permiten establecer un ámbito de efecto dentro del servidor por sí solas, las segundas afectan a todo el servidor a menos que estén dentro de una directiva de sección.

Apache se divide en varios módulos cada uno de los cuales hace referencia a un grupo de directivas que tratan partes distintas del servidor, como puede ser el sistema de archivos, el núcleo, etc. Los módulos de los que dispone Apache los podemos encontrar en la web de Apache httpd.apache.org/docs/2.0/es/mod/. 

A continuación se expone un ejemplo de configuración de un servidor Apache para el caso en que queramos utlilizar hosts virtuales:

NameVirtualHost 192.168.55.1
DirectoryIndex index.php
<Directory />
order Deny, Allow
Deny from all
Allow from 192,168.55.1
</Directory>
<VirtualHost 192.168.55.1>
DocumentRoot /web/miweb
ServerName www.miweb.midominio.es
</VirtualHost>
<VirtualHost 192.168.55.1>
DocumentRoot /web/webmitio
ServerName www.webmitio.midominio.es
ServerAlias www.mitio.es
<Directory /web/webmitio>
order Deny, Allow
Allow from all
</Directory>
</VirtualHost>

Esta configuración es un ejemplo del uso de host virtuales. Como se puede ver, el fichero httpd.conf no es más que una serie de directivas generales y de sección que en este caso definen dos subdominios para el dominio www.midomino.es. Se suele utilizar cuando queremos alojar en un servidor mas de una web sin necesidad de comprar más de un dominio en la red, se conoce como servidor compartido.

En nuestro ejemplo queremos alojar las web www.miweb.es y www.webmitio.es en nuestro servidor Apache, pero tan sólo disponemos del dominio www.midominio.es y para ello se utilizan los hosts virtuales, de tal manera que se pueden crear subdominios para tener mas de una web usando los recursos de los que disponemos. De esta forma tenemos www.miweb.midominio.es y www.webmitio.midominio.es en el servidor como subdominios de www.midominio.es.

Cada host virtual se trata como si fuese una máquina independiente dentro del sistema, por lo que puede llevar sus propias directivas para dar o denegar permisos, establecer un alias para ese host virtual, etc. Cada una de las webs que se cren con hosting virtual tiene su propio direcotrio raiz que definimos con la directiva DocumentRoot, así como un nombre de host que definiremos con la directiva ServerName.

Además, se le pueden incluir restricciones con directivas de sección como en el segundo de los casos del ejemplo. Con la directiva Directory, podemos crear restricciones a un directorio concreto. En este caso estamos dando permiso total al directorio raiz de la web.

HTML5 nos ofrece nuevas opciones a la hora de crear formularios, como son nuevos tipos de campos y validación automática del lado del cliente, sin necesidad de scripts.

Aunque no todos los navegadores implementan todavía todas estas nuevas características, siempre podemos utilizar algún script que nos permita su uso, como puede ser este plugin de jquery

Veamos los nuevos tipos de campo que nos ofrece:

• email: nos sirve para introducir direcciones de email
• url: para direcciones de páginas web
• number: para la introducción de números
• tel: para números de teléfono
• search: para campos de búsqueda
• search: para campos de búsqueda
• datetime: para seleccionar fecha y hora
• date: para seleccionar una fecha
• month: para seleccionar un mes
• week: para seleccionar una semana
• time: para seleccionar una hora
• datetime-local: para seleccionar una fecha y una hora sin zona horaria
• range: para seleccionar entre un rango de valores
• color: para seleccionar un color en valor hexadecimal

Nuevos atributos que nos ofrecen nuevas posibilidades:

• placeholder: nos muestra un texto de ejemplo dentro de la caja de texto que desaparece cuando hacemos foco en él.
• required: nos indica que ese campo no puede ser enviado vacío, y debe cumplir las especificaciones del tipo de campo que sea, por ejemplo, en un campo tipo email debemos introducir una dirección de correo válida
• autofocus: Hace que el cursor se coloque automáticamente en ese campo sin necesidad de ningún script.
• pattern: Expresión regular que debe coincidir con el valor correcto que queremos que introduzca el usuario.
• maxlength: En los textareas ahora podemos utilizar este atributo para limitar el número máximo de caracteres introducidos.

Estos son las principales novedades que nos ofrece HTML5, aunque hay muchas más que puedes consultar aquí

Veamos un ejemplo de un formulario en HTML5 que muestre estas novedades:

	<form method="post" action="script_de_proceso.php" autocomplete="off">
		<input type="text" placeholder="Nombre" name="nombre" value="" required autofocus>
		<input type="email" placeholder="Dirección de correo" name="email" value="" required>
		<textarea placeholder="Observaciones" name="observaciones" maxlength="200"></textarea>
		<input type="submit" name="enviar" value="Enviar">
	</form>

Antes de nada debemos preguntarnos, ¿qué es un polyfill? Un polyfill es un trozo de código (un plugin) que proporciona la tecnología que el desarrollador espera obtener del navegador de forma nativa. En definitiva se trata de hacer que aquellos navegadores que no son compatibles con una característica nueva, la incorporen a través de fallbacks, es decir de código, en su mayor medida javascript, que se encargue de realizar dicha funcionalidad.

Por ejemplo si queremos utilizar las nuevas etiquetas semánticas de HTML 5, debemos utilizar un polyfill que se encargue de hacer dichas etiquetas compatibles con versiones antiguas de Internet Explorer. El más utilizado es html5shiv.

O si por ejemplo queremos hacer que todos los navegadores hagan uso del nuevo atributo placeholder, que permite mostrar texto cuando dichos campos están vacíos. Entonces tan solo debemos buscar uno de los muchos polyfills que existen. O incluso crearlo nosotros mismos. Si optas por crearlo tu mismo, lo primero es ver si merece la pena comparando las versiones actuales para saber que podemos aportar. Y utilizar siempre detección de características. Es decir con HTML 5 ya nos nos basamos en detección de versiones de navegadores sino en características, es decir, si el navegador en concreto, sea la versión que sea, es capaz de realizar lo que se le pide. Para en caso correcto hacerlo de forma nativa.

Una de las ventajas de utilizar polyfills como desarrolladores es que nos olvidamos de los problemas y carencias de navegadores antiguos, y así podemos desarrollar páginas web centrándonos en los nuevos estándares y sacando el máximo provecho.

Si queremos utilizar propiedades de CSS3 como border-radius, box-shadow, border-image, rgba, gradientes, … Para así olvidarnos de tener que colocar imágenes en Internet Explorer, en el caso de bordes redondeados. Entonces es de recomendado uso utilizar CSS3 PIE. Obteniendo soporte para Internet Explorer 6, 7 y 8.

Volviendo al tema de entrada. El poly de polyfill, viene porque en algunas ocasiones para hacer funcional una característica se requiere de una solución cuando esta disponible cierta tecnología externa como podría ser flash o silverlight, y de otra solución cuando esta tecnología no esta.

En la mayoría de casos debemos utilizar polyfills porque Internet Explorer no se actualiza para corregir sus carencias. Concretamente se cierra en versiones, las cuales mantiene hasta que sale una nueva versión, abandonando así la anterior y no permitiendo la actualización a la nueva versión, a no ser que cumplamos los requisitos necesarios (como el sistema operativo necesario). Si dicho navegador se actualizara como Firefox o Chrome estoy seguro de que nos ahorraría mucho tiempo.

Para finalizar, un enlace con una recopilación de polyfills para hacer más fácil el tránsito hacia los nuevos estándares.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Anteriormente hemos visto cómo crear nuestros propios certificados digitales en un entorno de desarrollo.

El principal problema que comentábamos acerca de ésto es que la autoridad certificadora que los emitía no era confiable (sí, nosotros mismos no lo somos), por lo que en el mundo real siempre daría un fallo a la hora de verificar la firma digital de documentos, por lo que la solución es utilizar un certificado digital emitido por una autoridad certificadora de verdad.

Importando la Autoridad Certificadora de la Fundación Nacional de Moneda y Timbre al KeyStore de Java

Por defecto, el KeyStore de Java no trae incluido el certificado de la FNMT, por lo que deberemos añadirlo. En primer lugar deberemos descargarlo de la página:

http://www.dnielectronico.es/seccion_integradores/certs.html

En concreto la autoridad de validación AV FNMT DNIE y su certificado Certificado pkcs1-sha256WithRSAEncryption

Lo descargamos y descomprimimos y procedemos a buscar las herramientas necesarias para la importación de la JVM (Java Virtual Machine), que son el archivo cacerts que es donde se guardará el certificado y el programa keytool que se encarga de manejar dicho archivo.

En primer lugar, deberemos buscar donde están ubicado el JRE de nuestra JVM buscando la aplicación keytool. Las rutas son las siguientes:

<JRE_PATH>/bin/keytool

<JRE_PATH>/lib/security/cacerts

por lo que podemos proceder a importarlo con el comando y modificando previamente las rutas. Además deberemos ejecutarlo como Administrador en Windows o Super Usuario en Linux:

<JRE_PATH>/bin/keytool -import -keystore <JRE_PATH>/lib/security/cacerts -file <CERT_PATH>/AVDNIEFNMTSHA2.cer -alias AVDNIE -storepass changeit

El parámetro alias especifica el nombre con el que se guardará y el parámetro storepass es por defecto changeit para el cacerts si no lo hemos cambiado.

Comandos útiles de keytool para el KeyStore

Cambiar contraseña de cacerts (como super usuario)

<JRE_PATH>/bin/keytool -list -keystore  <JRE_PATH>/lib/security/cacerts -storepasswd -new <NUEVA_CONTRASEÑA>

Listar certificados en nuestro cacerts

<JRE_PATH>/bin/keytool -list -keystore  <JRE_PATH>/lib/security/cacerts -storepass <CONTRASEÑA>

Borrar certificado del cacerts (como super usuario)

<JRE_PATH>/bin/keytool -delete -alias <ALIAS> -keystore  <JRE_PATH>/lib/security/cacerts

Fuentes

Este artículo fue inspirado en la entrada de blog http://vjavierf.wordpress.com/2010/05/12/importar-certificados-de-una-ca-a-java/

Artículos relacionados

• Crear certificados digitales con OpenSSL
• Firmar y verificar la firma digital en documentos PDF con Java
  

Ya hemos hablado anteriormente sobre cómo empezar a utilizar certificados digitales en un entorno de desarrollo de programación, ahora vamos a ver la primera aplicación real con éstos certificados.

Firma digital de documentos PDF

La firma verifica la autoría y validez de una persona, por lo que es especialmente útil cuando hablamos de PDF que contienen facturas o documentos oficiales.

También lo podemos usar para validar un certificado en entornos Web de manera transparente al navegador. Quien lo haya hecho, sabrá que si queremos usar certificados en una aplicación web, hacerlo funcionar en todos los navegadores web puede causar bastantes dolores de cabeza, pero una sencilla manera es firmar un PDF dummy mediante CryptoApplet y validar si esa firma es válida, pero este procedimiento ya lo trataremos más adelante en otras entradas de blog.

Creación y modificación de PDFs con la librería iText

La librería iText disponible para Java y .NET permite crear y modificar PDFs dinámicamente desde un entorno de programación. En nuestro caso vamos a descargarnos las librerías OpenSource y añadirlas a nuestro proyecto Java, en nuestro caso hemos utlizado NetBeans.

Creando PDFs dinámicamente mediante PHP

En anteriores entradas del blog ya tratamos la manera de cómo crear PDFs dinámicamente mediante la librería mPDF, que podría ser interesante para esta aplicación.

Preparando nuestro certificado digital

El paso previo es tener preparado nuestro certificado digital. Éste debe estar en formato con extensión PFX (estándar PKCS12), que en el caso de no tener ninguno disponible, ya hemos explicado anteriormente en el artículo cómo crear certificados digitales como crear uno.

Un paso previo muy importante, a la finalización de nuestro proyecto, es añadir la autoridad certificadora a nuestra KeyStore de Java. En el caso de seguir el artículo de blog será obligado hacerlo si queremos que funcione correctamente, al igual que si por ejemplo queremos utilizar un certificado digital del DNIe, ya que el KeyStore de Java sólo contempla los típicos usados para HTTPS y algunos otros como Verisign.

Podéis encontrar más información de cómo añadir autoridades certificadoras a nuestro KeyStore de Java en este artículo de blog.

Firmando PDFs en Java

Crearemos el proyecto en NetBeans PDFSigner y pegaremos en el Main.java el siguiente código:

package pdfsigner;

import java.security.*;
import java.security.cert.Certificate;
import java.io.*;
import com.lowagie.text.pdf.*;
import com.lowagie.text.*;

/**
 * @author Imaginanet
 */
public class Main {

    public static void main(String[] args) {
        try {

            if(args.length == 0) {
                System.out.print("Necesito el nombre del PDF a firmar");
                System.exit(1);
            }

            KeyStore ks = KeyStore.getInstance("pkcs12");
            ks.load(new FileInputStream("RUTA_CERTIFICADO_PFX"), "CLAVE_PRIVADA_CERTIFICADO".toCharArray());
            String alias = (String)ks.aliases().nextElement();
            PrivateKey key = (PrivateKey)ks.getKey(alias, "CLAVE_PRIVADA_CERTIFICADO".toCharArray());
            Certificate[] chain = ks.getCertificateChain(alias);
            // Recibimos como parámetro de entrada el nombre del archivo PDF a firmar
            PdfReader reader = new PdfReader(args[0]); 
            FileOutputStream fout = new FileOutputStream("RUTA_ARCHIVO_PDF_FIRMADO");

            // Añadimos firma al documento PDF
            PdfStamper stp = PdfStamper.createSignature(reader, fout, '?');
            PdfSignatureAppearance sap = stp.getSignatureAppearance();
            sap.setCrypto(key, chain, null, PdfSignatureAppearance.WINCER_SIGNED);
            sap.setReason("Firma PKCS12");
            sap.setLocation("Imaginanet");
            // Añade la firma visible. Podemos comentarla para que no sea visible.
            sap.setVisibleSignature(new Rectangle(100,100,200,200),1,null);
            stp.close();
        }
        catch(Exception e) {
            e.printStackTrace();
        }

    }

}

Donde esperamos como parámetro de entrada al programa la ruta al archivo PDF original sin firmar y modificar las rutas al certificado digital PFX y la clave privada de éste.

Verificando firmas en PDFs desde Java

Ahora comprobaremos la vericidad de la firma con otro proyecto NetBeans PDFVerifier y colocaremos en su Main.java:

package pdfverifier;

import java.security.*;
import java.security.cert.Certificate;
import java.io.*;
import com.lowagie.text.pdf.*;
import java.util.Calendar;
import java.util.ArrayList;
import java.util.Random;

/**
 * @author Imaginanet
 */
public class Main {

    public static void main(String[] args) {
        try {
            if(args.length == 0) {
                System.out.print("Necesito el nombre del PDF a comprobar");
                System.exit(1);
            }
 
            Random rnd = new Random();
            KeyStore kall = PdfPKCS7.loadCacertsKeyStore();
            PdfReader reader = new PdfReader(args[0]);
            AcroFields af = reader.getAcroFields();
            ArrayList names = af.getSignatureNames();
            for (int k = 0; k < names.size(); ++k) {
               String name = (String)names.get(k);
               int random = rnd.nextInt();
               FileOutputStream out = new FileOutputStream("revision_" + random + "_" + af.getRevision(name) + ".pdf");

               byte bb[] = new byte[8192];
               InputStream ip = af.extractRevision(name);
               int n = 0;
               while ((n = ip.read(bb)) > 0)
               out.write(bb, 0, n);
               out.close();
               ip.close();

               PdfPKCS7 pk = af.verifySignature(name);
               Calendar cal = pk.getSignDate();
               Certificate pkc[] = pk.getCertificates();
               Object fails[] = PdfPKCS7.verifyCertificates(pkc, kall, null, cal);
               if (fails == null) {
                   System.out.print(pk.getSignName());
               }
               else {
                   System.out.print("Firma no válida");
               }
               File f = new File("revision_" + random + "_" + af.getRevision(name) + ".pdf");
               f.delete();
            }
        }
        catch(Exception e) {
            e.printStackTrace();
        }
    }
}

Al igual que el anterior programa, necesita como parámetro de entrada el archivo PDF a comprobar, mostrando en caso de ser verificada la firma los datos del propietario y en caso contrario el mensaje de error "Firma no válida".

Llamada a los programas desde una aplicación

Hemos separado ambos programas para que actúen como programas como cajas negras y sea independiente del lenguaje de programación del que se llame.

En el caso de firmar, llamaremos como java pdfsigner archivo.pdf generando un archivo pdf firmado.

Tras ello, podemos vertificar la firma con java pdfverifier firmado.pdf mostrando la salida de la firma en caso positivo. Ya que la firma puede guardarse en varios formatos según el certificado PFX, recomendamos que esa salida hagamos el parseo necesario desde nuestra aplicación buscando datos que estemos seguros que vayan a salir en la firma, como es el caso del DNI, CIF, dirección email, etc.

Comunicando nuestro programa de firma digital de PDF con aplicaciones PHP

Una de las aplicaciones más interesantes es la de usar esta aplicación de firma con PHP. Las librerías que permiten hacer ésto en PHP no son libres, pero sin embargo podemos llamar a nuestras aplicaciones Java mediante passthru, exec, etc. permitiendo tener firma digital open source en PHP.

Referencias

• iText
• Proyecto OpenSource iText
• Ejemplos y referencia de la librería iText
• Crear y configurar certificados digitales con OpenSSL
• Crear PDFs dinámicamente con PHP mediante mPDF
• Añadir Autoridades Certificadoras al KeyStore de Java para usar el DNIe en nuestras aplicaciones
• CryptoApplet

Cuando trabajamos con Moodle, una de las interactuaciones desde una aplicación externa más interesantes con Moodle es poder dar matricular y desmatricular en cursos y también poder dar de alta usuarios en Moodle de manera externa.

Dar de alta usuarios en Moodle

La alta de usuarios es bastante sencillo ya que simplemente deberemos añadirlo a la base de datos con el formato que Moodle requiere en la tabla mdl_user cuyo contenido más destacado es el siguiente:

• id: identificador único dentro del sistema, debe ser número y autoincremental, por ejemplo el valor en la consulta SQL debería ser NULL
  
• auth: con valor "manual", especifica el método de autenticación
• confirmed: valor 1, especifica si se ha confirmado el alta
• username: nombre de usuario
• password: contraseña guardada mediante hash MD5

El resto de campos su contenido es bastante obvio.

Matricular y desmatricular usuarios en cursos

Dado que es bastante complicado dar de alta en cursos usuarios, deberemos utilizar el módulo enrolments de Moodle para hacerlo mediante la creación de un archivo con un formato determinado.

En primer lugar deberemos activarlo como administrador desde Moodle en la opción: Courses -> Enrolments -> Flat file

Después buscaremos la ruta donde deberemos generar el fichero. Por defecto se encuentra fuera de la raíz pública de archivos, en el archivo moodledata/1/enrolments.txt

El siguiente paso es generar el archivo en texto plano en el formato correspondiente:

add, student, idnumber_mdl_user1, idnumber_mdl_course1
del, student, idnumber_mdl_user2, idnumber_mdl_course5

Donde idnumber_mdl_user1 corresponde con el campo idnumber de la tabla mdl_user del usuario correspondiente y idnumber_mdl_course1 es el campo idnumber del curso en la tabla mdl_course. Atención, desde Moodle deberemos rellenar correctamente estos campos, ya que no pueden estar vacíos.

En ese archivo generado en primer lugar añadiremos al usuario 1 al curso 1 como estudiante y borraremos al usuario 2 del curso 5 como estudiante.

El último paso es llamar al archivo que ejecuta el cron periódico de mantenimiento de Moodle para forzar la actualización:

http://HOST/admin/cron.php

Si tuviéramos algún error en la configuración, se indicaría en este fichero.

Referencia

• http://docs.moodle.org/dev/Developer_documentation
• http://docs.moodle.org/20/en/Flat_file

Veamos un ejemplo de una galería de imágenes en 3D utilizando javascript y CSS3. Este ejemplo funciona en firefox, chrome, safari y opera, aunque ofrece un mejor rendimiento en los navegadores basados en webkit.

Haz click sobre la galería y pulsa las flechas izquierda y derecha de tu teclado para hacer girar la galería.

Para el desarrollo de este ejemplo hemos usado jquery. Creamos una figura con tantos lados como imágenes tenga la galería y las posicionamos en un espacio 3D utilizando las propiedad de CSS3 "transform", y la función "rotate". Para la animación, definimos otra propiedad CSS3 en la hoja de estilos, "transition", y animamos la propiedad "transform". Al modificar esa propiedad por javascript conseguimos la animación deseada.

Si estás viendo esta web en un navegador antiguo o en Internet explorer quizás no puedas apreciar el funcionamiento. Recomendamos usar los navegadores firefox o Chrome (siendo éste el que mejores resultados ofrece).

Descarga el código del ejemplo.

Introducción

La nueva versión de la popular API de Google Maps está llena de novedades que hacen que trabajar con mapas y geolocalización sea una tarea cada vez más potente y sencilla. Con esta última actualización de la API podemos fácilmente incorporar mapas a nuestras webs, personalizando todo lo que necesitemos.

En este artículo vamos a seguir un sencillo tutorial para poder empezar a trabajar con esta API:

Primeros pasos

Lo primero de todo, tenemos que añadir la API en el TAG HEAD

En este ejemplo, sacado del tutorial de Google, vemos que hace hincapie en definir una variable llamada sensor en el mismo instante de invocar la librería. Como podemos ver en la documentación de la API

Ten en cuenta que también debemos establecer un parámetro sensor para indicar si esta aplicación utiliza un sensor para determinar la ubicación del usuario. En este ejemplo hemos dejado el parámetro como la variable set_to_true_or_false para hacer hincapié en que se debe definir este valor en true o false de forma explícita.

Una vez aclarado esto, entonces vamos a inicializar la API con la variable sensor a FALSE

Ahora ya podemos crear en nuestro código JavaScript un mapa, indicando en el constructor del objeto la longitud y latitud donde queremos que inicialmente se encuentre el mapa.

Si nos fijamos bien, con estos pasos tenemos mucha versatilidad para crear nuestros mapas, pues hemos definido la posición inicial del mapa definiendo zoom, posición y tipo de mapa.

Luego, al crear el mapa lo "vínculamos" dentro de un elemento HTML como puede ser un elemento DIV por ejemplo.

Marcadores

Los Marcadores es algo que también es más sencillo de manejar que en versiones anteriores de la API

En primer lugar, basta con crear un objeto marker

Y luego asociarlo al mapa

Esto es un ejemplo muy sencillo de lo que podemos hacer, pero la funcionalidad de estos marcadores viene en que podemos asociarle Listeners, que estarán pendientes de los eventos que ocurran,

Por ejemplo, si queremos escuchar el evento click del marcador, basta con hacer esto:

Centrado en función marcadores

Centrar el mapa en función de un conjunto de marcadores nos implica crear un objeto Bounds:

Conforme vamos creando marcadores y situándolos en el mapa, debemos de añadirlos también a este objeto

Y como último paso, ajustamos el mapa a este contorno. Esta función nos ajustará tanto el zoom como las coordenadas para se vea todo centrado en nuestro mapa.

En próximas entregas trateremos de ir profundizando más en esta potente API

Fuentes

http://code.google.com/intl/es-ES/apis/maps/documentation/javascript/ http://code.google.com/intl/es-ES/apis/maps/documentation/javascript/reference.html

Diseño del icono: Thiago Silva

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 vídeo y mp3 o amr para audio, entre otros.

FFServer nos permite transmitir vídeo 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.

Herramientas de conversión 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 vídeo o una dirección IP de una máquina local o remota en la que se encuentre el fichero de audio o vídeo 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 vídeos 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 vídeo de entrada y el que tendrá el vídeo a la salida.

-i

Esta opción es la que nos permite especificar la fuente de la que se extraerá el vídeo, 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 alguna 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 vídeo.

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 vídeo, e independiente mente, de si su fuente es un fichero propiamente dicho o una tarjeta capturadora de televisión o una dispositivo externo de vídeo 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 vídeo como el de audio a mpeg. Tendremos dos ficheros nombrados exactamente igual, pero en el uno habrá audio y en el otro vídeo.

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 vídeo.

Streaming de vídeo y audio con FFSERVER

FFServer es un sistema que nos permite transmitir ficheros de audio o vídeo 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
• Añadir un certificado al KeyStore de Java
• Firmar y validar firmas digitales en documentos PDF en Java

< 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");
        imagejpeg($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 zip 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']."rn";
}
 
$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;
		_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