Enhancing Web Typography with jQuery


Web typography has come a long way thanks to the various custom font solutions like @font-face and Google Fonts, but we’re still lacking the precise control that we have over type in our design and desktop publishing apps. Thankfully there’s a range of jQuery plugins that give us some super useful features and allow us to manipulate our web text like never before. This post rounds up 10 of the most popular web typography plugins that allow you to fine tune your type as well as create some cool effects.



Lettering.js example

Lettering.js is one of the simplest but most popular web type plugins. By splitting up your text and wrapping each letter in a custom <span> element it allows precise control over your headings. Use it to carefully tweak your kerning, or add various CSS styles to each individual letter to create some cool effects.

Download the Lettering.js plugin


FitText.js example

Responsive website designs are great, they allow the content to scale according to the user’s viewport size. Naturally your web text will wrap as its container narrows, but sometimes that leaves your titles and headings looking a little ugly, especially if it creates orphans or widows. This is where the FitText.js plugin comes in, it allows your headings to scale just like a responsive image, without words dropping down onto a new line.

Download the FitText.js plugin


Bacon.js example

Cool name, cool plugin! Bacon allows you to wrap text around a bezier curve, giving you advanced desktop publishing abilities directly within your website designs. Manipulating text around an image is super easy in InDesign, but in HTML/CSS text simply flows in square blocks. You could achieve similar effects using some dirty HTML markup, but Bacon allows you to cleanly style up your text with a series of coordinates.

Download the Bacon plugin


TypeButter example

There’s plenty of jQuery plugins that allow you to tweak the kerning of your web type, but most require direct input to move each letter individually. If you’re looking for a quick and easy solution check out TypeButter. Simply spread it over your type and it will automatically override the browser’s default values with visually pleasing optical kerning. By default the plugin supports Arial, Georgia, Helvetica, Times and Verdana, but you can also roll your own if you need another font.

Download the TypeButter plugin


Kerning.js example

Despite its name, Kerning.js allows you to do so much more than just set individual letter spacings. With features such as size adjustment, color and various transformations on a per-letter basis it allows you to create some really cool type effects. What’s more, this is all done via CSS without any additional spans or markup added to the HTML, which is nice!

Download the Kerning.js plugin


Baseline.js example

Achieving a nice vertical rhythm in your web designs is easy, right? Just set your line-height and away you go! Unfortunately things soon start to fall apart when images get involved, but this is where the Baseline.js plugin steps in. With just one line of Javascript Baseline.js will scale your image dimensions to a multiple of your desired baseline figure, meaning your content will always stay perfectly aligned to your baseline grid.

Download the Baseline.js plugin


ArcText.js example

Setting lettering in an arc layout isn’t a requirement we run into every day but if you’re designing a page with an eye catching header, or recreating a vintage logo effect the Arctext.js plugin might just come in handy. Arctext.js does exactly what the name implies, it allows you to set your text along an imaginary arc of a given radius.

Download the Arctext.js plugin


Hatchshow.js example

We’ve all seen those cool typography posters where each line is scaled to the same width. Now you can easily achieve the same effect in your web designs with the Hatchshow plugin. Hatchshow will automatically add a <span> to each line of text and scale the font size so each line ends up the same width. This is another plugin that’s useful for creating classic or vintage designs.

Download the Hatchshow plugin


slabText.js example

At first I thought slabText.js was just another title scaling plugin, but it’s actually much more. slabText takes the basic ideas of FitText and Hatchshow reviewed above and mashes them together. This means you not only have a responsive headline, it also intelligently splits itself into new rows and scales the font sizes to create equal measures. So once the viewport reaches a certain size, your headline will be rearranged to remain legible, rather than scale to an unreadable size.

Download the slabText.js plugin


jqIsoText.js example

jqIsoText is a jQuery plugin for creating pseudo-isometric text effects, but what the hell does that mean?! Basically it means you can give your text various size related effects such as bulges by scaling from one value to another. This is another plugin that would be a great fit for creating cool headlines, or to mimic vintage style lettering layouts.

Download the jqIsoText plugin


Gracias a Line25 - http://line25.com/

La importancia de los titulares

“On the average, five times as many people read the headline as read the body copy. It follows that unless your headline sells your product, you have wasted 90 percent of your money. The headlines which work best are those which promise the reader a benefit.”

- David Ogilvy, ad guru

Compartir presentaciones online

1. Slideshare

Es el servicio más utilizado y un ‘estándar de facto’ para compartir presentaciones en internet. Con una comunidad que cuenta con gran cantidad de usuarios, Slideshare es el servicio donde probablemente la gran mayoría de tus contactos compartirán sus presentaciones. Su uso es gratuito, aunque existen planes profesionales con mayores funcionalidades y capacidades como acceso a herramientas de análisis estadísticos sobre los documentos descargados, integración con LinkedIn y la descarga ilimitada de documentos. Este servicio ofrece la posibilidad de incluir vídeos alojados en Youtube en las presentaciones. Soporta los formatos .ppt, .pps, .pptx, .odp, .pdf, .doc, .docx, .odt, Keynote e iWork pages. Posee una herramienta de audio y video conferencia gratuita llamada Zipcast

2. Scribd

Scribd es un servicio con un marcado carácter social que permite subir y compartir presentaciones online de manera gratuita. Soporta una amplia variedad de formatos: PPT, PPS, PPTX, DOC, DOCX, XLS, XLSX, ODS, SXC, ODT, SXW, ODP, SXI, PS, TXT, RTF, PDF y cada archivo puede tener hasta 75 MB. Ofrece un lector multiplataforma (iPaper) que tiene varias funcionalidades (zooms, búsqueda de texto, utilización de impresora), que ha evoluciona hacia el soporte HTML5. Las presentaciones se pueden configurar como públicas o privadas. No dispone de cuentas premium.

3. Speaker Deck

Speaker Deck es una web que permite subir tus presentaciones en forma de documento PDF. El servicio se encargará automáticamente de transformar el documento en diapositivas para dar lugar a una presentación que se puede mostrar en cualquier sitio web mediante la inserción de código HTML embebido.

4. MyBrainShark

MyBrainShark es un servicio web que permite narrar y compartir presentaciones de diapositivas online. Este servicio soporta el formato Power Point de Microsoft. Dispone de versión gratuita y de pago, y su uso es bastante sencillo. Después de subir la presentación, se pueden comentar las diferentes diapositivas para terminar de confeccionar una presentación multimedia. Posee una aplicación para Android que se puede descargar desde Google Play. La opción para la descarga de presentaciones está disponible de manera gratuita a través de la función “Attachment”. También es posible vender tus presentaciones a través de MyBrainshark gratuitamente, registrándote como proveedor de aprendizaje, o registrándote para obtener una cuenta profesional.

5. SlideRock

Este servicio propiedad de VMware es una buena alternativa para compartir presentaciones online. Proporciona un buen interface de usuario para trabajar mediante su aplicación web. Desde su integración dentro de los servicios que ofrece Google Drive, ha ganado muchos enteros para seguir captando cuota de mercado. Existen tres posibilidades para su uso: Lite (gratuita), Pro y Enterprise.

6. AuthorStream

Este servicio está orientado a compartir presentaciones de PowerPoint mediante un enlace o insertadas en otra página web. Posee una funcionalidad para convertir la presentación en un vídeo en formatos FLV, MP4, AVI y WMV. Los usuarios de esta plataforma pueden crear canales donde intercalar las diapositivas de la presentación con vídeos de Youtube, para confeccionar presentaciones con más recursos multimedia. También permite realizar presentaciones en vivo, mediante la organización de un evento virtual.

7. SlideServe

Otro buen servicio para subir y compartir presentaciones en la red es SlideServe. Este servicio admite presentaciones en formato Ppt, pps y pot y con un tamaño máximo de hasta 30 Mb. Posee un directorio donde buscar presentaciones subidas por otros usarios mediante filtros por temática o palabras clave.

8. Zentation

Zentation combina vídeo y diapositivas para crear presentaciones en línea que simulan una presentación en directo de productos, formación a distancia o eventos. Con este servicio se pueden crear fácilmente, además de las típicas presentaciones convencionales, webinars, webcasts, e-learning, formación y eventos virtuales. Para ello solo es necesario seguir 3 sencillos pasos: subir un vídeo, subir un PowerPoint y sincronizar ambos. Dispone de una versión premium orientada a empresas que, entre otras opciones, permite subir vídeo de hasta 90 minutos, frente a la versión gratuita que utiliza Youtube para sincronizar el vídeo.

9. Knoodle

Con Knoodle es posible crear presentaciones en formato de ‘doble panel’ y la sincronización de presentaciones de PowerPoint a vídeo. Las presentaciones pueden ser compartidas a través de una página web personalizada con la marca o incrustados en sitios web y blogs. Ofrece un periode gratuito de prueba de 30 días y sus planes de precios comienzan por 19.99 dólares al mes.

10. PreZentit

Es una herramienta gratuita que permite crear presentaciones en línea, y posibilita que otros pueden trabajar en la presentación de manera colaborativa y en tiempo real. Crea presentaciones con solo unos pocos clicks, desde cualquier lugar, solo necesitas un navegador web. Las presentaciones son privadas o públicas y cada una tiene su propia dirección web para poder visualizarlas online. Es posible descargar las presentaciones para mostrarlas sin tener que estar conectado a internet. No hay limite en el número o largo de presentaciones y tienes hasta 250MB para guardar tus imágenes. Las presentaciones se guardan en formato HTML, por lo que es bastante fácil editarlas a mano.

11. SlideBoom

SlideBoom es un servicio gratuito para subir y compartir presentaciones de PowerPoint en la web. Soporta los formatos PPT, PPS, PPTX, PPSX. Los archivos no deben sobrepasar los 100 MB de tamaño. No es necesario el registro para comenzar a subir tus presentaciones, pero el archivo se borrará después de una semana. Los usuarios registrados en cambio, pueden mantener sus presentaciones por tiempo indefinido. Al subir tu presentación de PowerPoint a SlideBoom, todas las animaciones y transiciones se conservan, aunque no se conservan las pistas de audio. Las presentaciones pueden ser compartidas mediante la inclusión de código embebido en otras webs. Las presentaciones pueden ser públicas o privadas.

12. Calaméo

A diferencia de anteriores, Calaméo es una plataforma para compartir contenidos que soportan elementos multimedia. Permite así convertir todo tipo de documentos ofimáticos (PDF, MS Oficio, OpenOffice, StarOffice) en publicaciones digitales interactivas (integrando sonidos, imágenes, vídeos) para producir presentaciones de calidad profesional. Ofrece la posibilidad de conectar tus cuentas en redes sociales para compartir los contenidos alojados en el servicio, en Twitter, Facebook, Tumblr, etc… Posee cuentas premium que ofrecen las siguiente características: gestión de suscriptores con potente sistema de administración de derechos digitales (DRM), acceso directo a su API, visualización sin marca de agua o descarga directa de los documentos.


Visto en http://unadocenade.com/una-docena-de-servicios-para-compartir-tus-presentaciones-online/

Fuentes que hacen fácil la lectura

Estas fuentes los permiten:


Small sample of the Arnhem typeface

Arnhem is a no-nonsense high-contrast oldstyle-serif face. It is a contemporary classic for newspaper and book setting, designed by Fred Smeijers and distributed via OurType. Available for print and Web.

Small sample of the Benton Sans typeface

Benton Sans is a Tobias Frere-Jones performance of Morris Fuller Benton’s News Gothic genre. Designed for Font Bureau, it is not only a great typeface for small print in newspapers, but one of the best-rendering text faces for the Web as well. Available for print and Web.

Small sample of the Ibis typeface

Ibis is another Font Bureau typeface, designed by Cyrus Highsmith. This square serif family is also no stranger to cross-media text-setting. Ibis works just as well whether you use it in print or on screen. Available for print and Web.

Small sample of the Ingeborg typeface

Ingeborg is modern serif family from the Viennese type and lettering powerhouse, the Typejockeys. Like any proper family should, Ingeborg has optically-sized variants for text and display settings. The display versions of the typeface can get pretty far out, too! Designer Michael Hochleitner named this typeface after his mother. Available for print and Web.

Small sample of the Ludwig typeface

Fred Smeijer&srsquo;s work in contempory type design is so significant that he gets two shout-outs in my list. His Ludwig type family takes a nod from 19th century grotesques, but he does not try to sanitize their quirky forms, as so many type designers had tried to do before him. Available for print and Web.

Small sample of the Malabar typeface

This is one of the typefaces that I’ve designed. I’m somewhat partial to Malabar. Available for print and Web.

Small sample of the FF Scala Sans typeface

Martin Majoor’s FF Scala Sans has been my top go-to typeface for almost 15 years. It mixes well with the serif FF Scala type, but it’s also really great on its own. Available for print and Web.

Small sample of the URW Grotesk typeface

Of all the typefaces designed by Hermann Zapf over his long career, URW Grotesk is clearly the best. Unfortunately, it has been a little overlooked. URW Grotesk is a geometric sans, with a humanist twist that brings much more life into the letters than this genre usually allows for. Plus, the family is super big. Available for print and Web.

Small sample of the Weiß-Antiqua Typeface

Are you a DIY-fan? Do you like to print with letter press, whether you set your own type by hand, or have polymer plates made? Then check out the typefaces of Emil Rudolf Weiß! His Weiß-Antiqua is an eternal classic. Weiß may have passed away 70 years ago, but his work is still relevant. He was German, so his last name is sort of pronounced like Vice, as in Miami Vice. Available for print and Web.


(recopilación de Smashing Magazine)

El -9999px ha muerto, viva el #replace

Esto es lo que hacemos desde hace diez años con los logos:

<h1>Texto del logo + a veces eslogan</h1>
                        background: url("myimage") 0 0 no-repeat;
                         text-indent: -9999px;

Se acabó. Zeldman ha bautizado el nuevo método  que ya uso* y recomiendo como

“The Kellum Method”

El código es limpio, fácil y perfecto siempre que necesitamos que las imágenes de los logos se adapten (por cierto, ¿se habrá inventado ya algún sustituto para responsive design y media queries en castellano?).  No lo voy a usar para los H2,H3 etc, para eso ya tenemos las APIs y webkit.


 text-indent: 100%;
 white-space: nowrap;
 overflow: hidden;

* en todas las webs nuevas :-)

Facebook Dimensions Cheat Sheet

Cover Photo for Timeline

This is the big picture (also known as Cover Photo) for Facebook’s Timeline.
Width: 851px
Height: 315px

Facebook Page Width

The usable area (custom tabs) of your brands Facebook page
Width: 810 px
Height: Unlimited

This is the maximum size of the image you can upload.
Width: 2048px
Height: 2048px

Application icons for Timeline view

These are the icons that are displayed on a fan page that has Facebook Timeline enabled. If your picture exceeds these limits, your icon will be resized and converted.
Width: 75px
Height: 75px
Maximum file size: 5MB

Facebook Status Update

Status update length: 63,206 characters
Comment length: unlimited


The maximum file size of video you can upload
Size: 1024MB
Length: 20 minutes

Facebook application favicon size

This is the tiny icon that is being displayed on the left hand side of your news feed, where the applications that you use are.
Width: 16px
Height: 16px

Facebook milestone picture size

This is the size you use for milestone pictures such as company’s foundation date.
Width: 843 pixels
Height: 403 pixels

Profile picture for Timeline pages

Profile pictures sizes were recently updated for timeline. The new width and height are 180 px which will be automatically scaled down to following:
Width: 32px
Height: 32px

Please Note: It is important to choose a picture that can be scaled down as the profile pictures that are displayed on Timeline posts are really small. Best practice is to choose your business logo.

Thumbnail When Sharing

The image that is displayed next to the link when you click like or share something.
Width: 90px
Height: 90px

Pictures displayed in Facebook

This is the maximum size of the image as shown in slide show or album.
Width: 960px
Height: 720px

Facebook Ads

Picture in the ad
Width: 110px
Height: 80px
Size: 5MB

Text in ad
Header: 25 characters
Body copy: 135 characters



The dimensions allowed for your cover photo is 850 x 315 px. That’s a lot of space to play with, although under Facebook guidelines  they shouldn’t include:

  • Price or purchase information, such as “40% off” or “Download it at our website”
  • Contact information, such as web address, email, mailing address or other information intended for your Page’s About section
  • References to user interface elements, such as Like or Share, or any other Facebook site features
  • Calls to action, such as “Get it now” or “Tell your friends”

Wolfram Alpha y la democratización del conocimiento

Un año después de abrir Wolfram Alpha al uso público, la comunidad empieza a  creer que no es imposible lo que se propone Steven Wolfram, autor de Mathematica, que desde hace más de una década dedica todas sus energías a su ’máquina de computación’ , que no buscador,  Wolfram Alpha.  Es un proyecto a largo plazo,  pero apasionante. Lo explica él mismo en este vídeo de TED Talks.

Más información: Mayo, 2009 http://web-3.es/wolfram-alpha-computational-knowledge-engine-¡la-revolucion-ha-llegado/

Actualización 28/04/2010:

Transcripción de la charla y editorial de CNN


This Too Shall Pass – un vídeo para tomar nota

OK GO, los reyes del viral están de vuelta con un vídeo nuevo, posiblemente el mejor que se ha visto en mucho tiempo.

Mucha gente recuerda a esta banda DIY por su viral de las cintas de gimnasio Here It Goes Again (The Treadmill Video, parodiado incluso por los Simpson (OKGO Treadmill Dance on the Simpsons).  Lo de DIY no es que me lo invente yo viendo los virales, me convence lo de llamarse así ellos mismos “We’re trying to be a DIY band in a post-major label world” o esto: “Our whole bag is having good ideas and making cool shit.”

Los Reyes del Viral

A mi me hace mucha gracia también este, de ‘papel pintado’ , Do What You Want.

Pero no escribo aquí sólo por tener donde recurrir cuando quiera recordar los enlaces, sino porque imagino que puede dar que pensar a algún músico amigo o a ti, que pasas por casualidad  y  necesitas ideas frescas.  Por cierto, gracias por venir.

“This Too Shall Pass”, para que no te lo pierdas, es esteí:

Habrá quien diga que ven el El Hormiguero para inspirarse,  pero lo dudo.  A mi me maravillan sus múltiples facetas creativas y su capacidad para comunicar.

Éste es el  vídeo oficial de su último álbum Of the Blue Colour of the Sky.
La “máquina” fue diseñada y construida por la banda, con la ayuda de Laboratorios Syyn a lo largo de varios meses en una nave de dos pisos en LA.  Existen varios vídeos ‘cómo se hizo’  que  te gustarán, bien porque ya conoces su música o por cotillear en la producción.  Making of TTSP #1 – OK Go

Si te ha interesado o incluso resulta que eres músico y quieres tomar nota, hay más información en su  Web oficial :  http://www.okgo.net, en MySpace: http://www.myspace.com/okgo.

Las gafas Goggles, mejor que buscar en Google

Gafas para ver mejor Cuando escribí sobre ‘Similar Images’  en primavera, no habría apostado que una aplicación podría por sí sola revolucionar nuestra vida diaria con tanta rapidez.

Con una foto basta

Basta tener un móvil*   y  hacer una foto de lo que sea para obtener en segundos toda la información que tiene Google en sus indices.

Por ejemplo, de una botella de vino:


Y lo mismo ocurre con na tarjeta de visita: los datos pasan automáticamente a nuestra agenda.  Los productos se identifican a través de su código de barras y al instante podemos comparar sus precioscaracterísticas.  Podemos catalogar los libros con sólo fotografiar sus portadas.

¿Que tenemos fotos en papel sin ordenar y  sin identificar?  Ningún problema, mirad este vídeo de un ingeniero de Google que ha filmado sus pruebas.
Recomiendo el minuto 4.5  y el que me sorprende más, el 7:29.

¿No es un avance importante para aquellos que no pueden usar un teclado?

Si buscamos en las estadísticas de accesibilidad, podemos ver lo necesario que es aplicar la tecnología de reconocimiento de imágenes para una parte importante de la población. Pero no quiero desviarme, ese otro tema muy complejo.

Ahora dejo volar la imaginación:  estoy en una pastelería y me gustaría saber cuáles son los ingredientes de la tarta que estoy mirando.  No tengo que pedirlos, ni apuntar nada. Saco la foto y zzzas: la tarta Sacher, típica de Viena, de chocolate etc…  Hmm esto es  un tanto retorcido, pero que tire la primera piedra quien resiste la tentación: tu hija se presenta con un nuevo amigo. Con tener su foto, ya no hace falta hacer las incómodas preguntas para hacerle la ficha.  Linkedin,  Facebook o Twitter nos contarán en seguida lo que  quiso que se supiera de el o ella,   seguramente bastante .

La verdad es que prefiero pensar en los buenos y prácticos usos y los del vídeo ya me  ahorraran mucho tiempo en tareas ingratas.  ¿Más buenas ideas?

* como es obvio, el SO del móvil deberá ser Android, min 1.6.  y Goggles que se descarga gratis en el propio terminal.

Este es el enlace del sitio de Goggles:  http://www.google.com/mobile/goggles/#book, del que es también la imagen del ejemplo.

Trucos para conseguir mejores vídeos


Sólo hay una cosa completamente segura: un metraje inadecuado es igual a vídeos con problemas. Es obvio que se debería grabar con la calidad más alta de grabación. También, que para comprimir se debe de partir siempre a partir del original.  Lo que  parece es que nunca se repite demasiado que mucho movimiento y los cambios bruscos de plano son la causa más frecuente de mala compresión.

Antes de seguir, una observación: los compresores que conozco utilizan la terminología original.  Aquí me refiero muchas veces a los comandos  que se utilizan durante la compresión. Es lo que te vas a encontrar  al utilizar  el codec de ON2 VP6  o ffmpeg así que seguiré adelante sin traducir los  bitrate, keyframes o frames.

Un compresor funciona básicamente así: guarda un marco clave (key frame)  y a partir de allí, sólo los cambios que detecta en el marco siguiente. Luego repite este proceso hasta llegar al siguiente ‘key frame’.  Si tenemos muchos cortes, cada píxel de esos marcos intermedios deberá ser conservado.  Si, por el contrario, tenemos una imagen estable o algo que  se conoce como ‘talking head’ pocos píxeles cambiarán, el cálculo será fácil para el compresor y el resultado bueno.

Para empezar, utiliza los formatos de vídeo nativos

Si conviertes un formato comprimido a flv, lo más seguro es que añada ruido. El primer compresor ya ha aplicado su algoritmo de codificación reduciendo su calidad, tamaño de frames y bit rate.

Menos es más

Evita las transiciones elaboradas. No se comprimen bien. Llamativas secuencias con objetos  títulos  que rotan, se componen o alejan  en zoom pueden ser atractivas, pero no añaden información útil al video y son la causa frecuente de un resultado pobre porque no se comprimen bien.

Conocer la audiencia

Un usuario con conexión lenta o uno con un equipo cuyo procesador es lento, va a sufrir necesariamente pausas intermitentes que le parecerán insufribles.  El vídeo se alimentará del búfer intentando  hacer playback, pero cuando esté agotado, se va a parar.

El panorama es aún más inseguro en las transmisiones en tiempo real, donde hay que prestar especial atención al  ancho de banda disponible del espectador y ajustar el bitrate a cada caso.

La única recomendación segura es la de hacer clips cortos a la medida del usuario con recursos ‘peores’ y unirlos en una lista de reproducción.

Seleccionar frame rate correcto

Fps es la indicación de marcos  que se muestran cada segundo. La compresión depende del tipo de datos. Una imagen con poco movimiento no va ahorrar más de un 20% de datos. Sin embargo, si se comprime una con mucho movimiento, la reducción de la  tasa de fotogramas tendrá un efecto alto sobre la tasa total de datos.

No es recomendable reducir la tasa de fotogramas y si se hace, los mejores resultados se obtienen al dividir la tasa de fotogramas por números enteros.

Eliminar el ruido y el entrelazado

Aunque las tasas y los tamaños de fotograma de vídeo de Internet son generalmente más pequeños que los de televisión, monitores de computadora tienen mucho mejor fidelidad de color, saturación, nitidez, y la resolución que los televisores convencionales.
Incluso en una pequeña ventana, la calidad de imagen puede ser más importante para el vídeo digital que la televisión analógica estándar. El ruido que es apenas perceptible en la televisión puede ser evidente en una pantalla de ordenador.  FLV están destinados a la visualización progresiva en las pantallas de ordenador u otros dispositivos, pero no en pantallas entrelazadas como televisores.

Si no desentrelazas el vídeo, se verá lleno de líneas en zonas de alto movimiento.


La regla general es que VBR es para descargas progresivas y CBR para streaming. Sin embargo, es importante  experimentar con su contenido específico y  en su ambiente específico, porque tampoco ésta es una regla fija…

VBR o codificación de Tasa de bits Variable, permite en la compresión definir un valor o tasa de flujo de destino en conjunto con un valor máximo. La idea es que para utilizar eficientemente la compresión para mantener una calidad alta permitiendo picos ocasionales de partes del video con más dificultad para comprimir. Generalmente VBR es más eficiente comparativamente con codificación CBR o de Tasa de bits Constante, cuando hay que comprimir un archivo con la máxima calidad para una cantidad de almacenamiento determinada. Sin embargo, permitir que estos picos impredecibles de datos se mantengan a una tasa constante de calidad puede interrumpir la reproducción si los picos se hacen demasiado frecuentes o el límite máximo es muy alto. Por lo tanto, VBR es comúnmente utilizado para obtener las descargas progresivas y basadas en archivos de vídeo en la web. Con la actual oferta de servicios de banda ancha capaces de lograr picos de transferencia mucho más altos que lo que pueden mantener en un nivel constante, VBR se puede convertir en una opción también para hacer streaming.

Número de Pasadas

Esta configuración determina si el video se codificará en una sola pasada (ejecución de compresión) o si el codificador vuelve a revisar el video desde el principio al final, una segunda vez para ver si se puede mejorar la compresión de alguna parte. Se puede aplicar a CBR tanto como a VBR.

Cuando se aplican  dos pasos  durante la codificación VBR, el software tiene un primer paso en toda la longitud de un clip para la inspección de las piezas que serían más difíciles que otros a codificar. En el segundo paso, el programa  aplica ” lo que aprendió” durante el primer paso y ajusta la cantidad de la tasa de bits designado va a utilizar para cada fotograma del clip.

Al final, el tamaño del archivo es el mismo que en un paso, pero codifica los datos se asignan de forma más sensata.

Configurar la distancia entre key frames (fotogramas o cuadros clave)

Los key frames son cuadros completos de la fuente original sin ninguna referencia a otros cuadros dentro del video. Generalmente la distancia óptima depende de la cantidad de movimiento en el video y de la velocidad de cuadros y se configura entre uno y tres segundos, traducido a cuadros utilizando la tasa de cuadros (por ejemplo para un video en 30fps, un segundo son 30 cuadros).


Para lograr una buena compresión de audio, comienza con el audio limpio.

¿Mono o estéreo?

El verdadero estéreo requiere dos canales independientes de audio. Por esta razón,  deberíamos  pensar en audio en términos de una pista o dos pistas, más que como una característica agregada. Cuando tenemos  poco bitrate disponible, debemos elegir estéreo solamente si el contenido lo necesita verdaderamente. Por ejemplo, en un video musical, el sonido estéreo puede ser importante para una buena experiencia del usuario, pero un video con una persona hablando, donde el contenido se puede consumir en mono, nunca, aunque tenga música en la introducción. Si la fuente del material original es mono no tiene ningún sentido codificarlo como estéreo. Sería como grabar una foto blanco y negro en un formato color.

AAC mejor que MP3

AAC tiene muchas ventajas sobre otros codecs más antiguos de compresión con pérdida de audio como MP3, incluyendo una alta eficiencia (la misma calidad con menores tasas de bits) y características adicionales (más canales para implementar sonido envolvente), una gama más amplia de opciones de tasa de muestreo, y más. AAC también tiene variantes: por ejemplo HE.AAC para mayor eficiencia, con tasas de bits más bajas para hacer streaming.

Igual que con el vídeo,   tratar de tener audio sin comprimir o sin pérdida para comenzar y comprimir solo en la etapa final es lo que facilitará la buena compresión.

Bits por muestra

Así como las fotos digitales son divididas en píxeles con distintos niveles de intensidad (como 256 niveles de gris) el audio digital tiene diferentes escalones en donde la onda de sonido puede estar en un momento determinado. Usando más bits por muestra puede definir un flujo de audio como más cercano a la onda de sonido, ya que tiene más “escalones”. Generalmente, el audio de 16 bits es considerado de alta calidad, y todas las formas de reducir la tasa de bits deberían ser consideradas antes de reducir el valor de bits por muestra.

Frecuencia de muestreo

Como el oído humano no es sensible a frecuencias de más de 20kHz, la frecuencia de muestreo de 44.1 kHz es adecuada para la mayoría de las aplicaciones. La excepción es audio que solo contenga la voz que se puede codificar en frecuencias de muestreo más bajas como 22.05 kHz, porque la frecuencia útil más alta no llega ni cerca del límite humano de percepción de sonido.

Aun así sorprendentemente el rango de frecuencias puede degradar otros sonidos sutiles como sonidos de la respiración y silbidos, lo que podría dar una sensación de pérdida de calidad de audio. Generalmente las frecuencias de muestreo más altas que 48 kHz no se usan salvo en aplicaciones de audio de alta fidelidad.

Tasa de bits de audio

Normalmente una corriente de audio consume una proporción menor en la tasa de bits en un archivo de audio y video. Aun en tasas de bits bajas se puede conseguir una calidad de audio razonable. Por ejemplo una pista de música estéreo se puede codificar entre 96 y 128 kbps con una pérdida de calidad entre mínima a imperceptible. En sonido mono tasas de bits tan bajas como 56-80 kbps puede aun ser aceptables, mientras que en un audio que solo contenga voz, usado en aplicaciones que solo pretenden que el audio sea comprensible y sin tener una estética placentera las tasas de bits pueden bajar drásticamente.


Comprimir un video para internet es más un arte que una ciencia.

Producir y comprimir los vídeos de calidad para internet es mucho más complejo que para los soportes tradicionales. En internet, son tantos los factores que influyen y que se escapan a nuestro control que es imposible emplear las formulas mágicas. ¿Cómo estará la conexión en el momento en que se visualice nuestro precioso vídeo?  ¿Y la capacidad de procesar del equipo de usuario? En 2009 es igual de importante que cuidar el empleo y compresión de las imágenes en 1999. Sí, para quien no lo ha vivido, hubo un momento en que no se podía publicar una imagen de cualquier  tamaño… y este post estará obsoleto cuando consigamos las velocidades como las que ya disfrutan los internautas de Japón.

Mientras, saber para qué sirven los parámetros de configuración ayuda.  Se trata de tener por donde empezar, de experimentar ‘con orden’ y sentido, y así perfeccionar la habilidad.


Hands-On Guide to Flash Video: Web Video and Flash Media Server (Hands-On Guide Series) , Stefan Richter

Flash Video for Professionals: Expert Techniques for Integrating Video on the Web ,  Lisa Larson


Ayuda orientativa en una interfaz realizada por Robert Reinhardt, el autor de los libros más interesantes sobre Flash Vídeo.

Adobe Flash CS3 Professional Video Studio Techniques by Robert Reinhardt

Amazon: http://www.amazon.com/gp/product/0321480376?ie=UTF8&tag=fs-fbc-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=03214803


Cloud computing. Una excelente opción que pone a nuestra disposición los mejores equipos y procesos sin los costes asociados a su puesta en marcha y mantenimiento


Tutoriales, trucos y guías de todo tipo

Codificación de vídeo VP6: los pixeles importan

Cómo conseguir la mejor calidad de vídeo VP6 en Flash

metraje pixeles importan VP6 es el estándar de facto para la codificación de  vídeo para Internet desde de su inclusión en Adobe ® Flash ® Player y JavaFX. Es el punto de referencia para la calidad y accesibilidad de la web video, originalmente con VP6-E, y ahora con VP6-S de alta definición (HD).

Compone marcos en macrobloques de 16 × 16 píxeles,  de ahi que la codificación y la calidad final serán mejors  para dimensiones  divisibles por 16.
En la web se ven muchos videos dimensionados con número impar de resoluciones , por ejemplo 500 × 375, 433 × 243, etc. No es el peor de los delitos que se cometen durante la compresión , peri si es cierto que puede dañar la calidad del video. Probablemente ocurre que por inexperiencia, directrices o – a veces opr no saber muy bien qué se esta haciendo – se opta por dejar por defecto o elegir la opción ‘Preservar la Relación de Aspecto’.

Preservar la relación de aspecto es bueno. Nadie querra ver un vídeo con objetos  o  gente deformes. Pero tampoco hay que ser excesivamente estricto.  Si la conservación de una relación de aspecto crea dimensiones que no son múltiplos de 16 (o, peor aún, son números impares), la calidad de video va a ser perjudicada.

¿Cómo asegurarse de que las dimensiones sean múltiplos de 16?

Con la ayuda de unas simples operaciones matématicas y siguiendo estos rápidos pasos

  1. Selecciono siempre Sin restricciones para la relación de aspecto
  2. Cominezo por  la altura que convine a mi diseño de página , debe ser multiplo de 16.
  3. Luego calculo el ancho que correponde a esta altura.

Un ejemplo práctico de cálculo de dimensiones de vídeo para internet:

1. Decido la altura que quiero  para mi vídeo, siempre divisible por 16. Por ejemplo, 240.

2. Divido el ancho original del vídeo (en píxeles) por su altura, para obtener el cociente de aspecto.

  • 4:3 = 4/3 = 1.333
  • 16:9 = 16/9 = 1.777
  • 1.85:1 = 1.85/1 = 1.85
  • 2.39:1: = 2.39/1 = 2.39

3. Multiplico la altura por el cociente del aspecto de video original y redondeo el reultado a un entero

  • 240 * 1.7777 = 426.648 = 427Este es mi ancho inicial. Lo divido por 16 y anoto el resto.
  • En mi ejemplo, el resto es 11.427/16 = 26 r11 427/16 = 26 R11

4. Si el resto es de 8 o menos,  lo resto del ancho original. Si es mayorde 8, lo resta de 16, y lo sumo el resultado al ancho inicial.

427 + (16 – 11) = 432 427 + (16 – 11) = 432

El resultado de este último cálculo siempre será divisible por 16, y es el ancho  que debo utilizar para ese valor l de altura elegida.

Así obtendremos el tamaño que nos conviene y la calidad de vídeo óptima debido a que ambos valores son divisibles por 16.

Dimensiones para el vídeo que comprimiré:   432:240

Si el ancho es más importante que la altura, se pueden invertir los valores .
Si necesito cambiar el vídeo a una relación de aspecto diferente (por ejemplo, de 4:3 a 16:9), basta con cambiar el cociente de aspecto en el paso 2.

H.264 es capaz de hacer 4 × 4 macrobloques
Cuantos más píxeles se tiene para empezar, mejor. Así que consistiría en cambiar el tamaño de 1080i a 544 (y me aseguro de desentrelazar el contenido si inicialmente no estaba destinado a internet sino a otros soportes.

Reblog this post [with Zemanta]

10 Strategies to fight negative publicity

What do you see when you search for your company or brand name? Is there anything on the first page of the search engine results that you wouldn’t be proud to display on your home page? Consumer review sites, blogs and forums have made it easy for anyone to say whatever they want about your company, whether they be disgruntled customers or competitors who like to play dirty.

If you’re in a situation where negative publicity is front and center in search results, there are ways you can reclaim search engine real estate for your corporate identity. Though you can’t make negative results disappear from the search engine indexes entirely, the following strategies can help them slip off the first few pages of search engine results.

Sigue leyendo

10 Usability Crimes You Really Shouldn’t Commit

Crime 1: Form labels that aren’t associated to form input fields

Using the ‘for’ attribute allows the user to click the label to select the appropriate input fields within a form. This is especially important for checkboxes and radio fields to give a larger clickable area, but it’s good practice all round.

Crime 2: A logo that doesn’t link to the homepage

Linking the logo of a website to the homepage has become common practice and is now second nature for (most) web surfers to expect the logo to head back home. It’s also worth mentioning the logo should appear in the top left.

Crime 3: Not specifying a visited link state

Visited link states do exactly as they say on the tin. It’s not the most advanced CSS selector, but it’s one that is often overlooked. Give users a visual clue as to which link has already been clicked.

Crime 4: Not indicating an active form field

You can use the ‘:focus’ selector on lots of elements, but it’s super handy when used on inputs and textareas to indicate that the field is active. Add CSS styling such as a highlighted border, or a subtle change to the background color.

Crime 5: An image without an alt description

This is straying a little into the realm of accessibility, but it’s still an important consideration! Remember to always add a descriptive alt attribute to your images, unless of course they are used for decorative purposes, then the ALT attribute can be left empty (but should still exist!). When using an image as a link, enter a description of where the link goes.

Crime 6: A background image without a background color

It’s common to use background images behind passages of text, but it’s worth remembering that if background images are disabled by the user, there needs to be a similar tone in the form of a background colour to avoid the text becoming unreadable.

Crime 7: Using long boring passages of content

There’s nothing more off-putting than landing on a webpage that’s laid out as a continuous passage of text. Break up your content with images, headings and clear sections to make it easier to scan, read and digest.

Crime 8: Underlining stuff that isn’t a link

Everyone knows that text that’s underlined, or is a different colour is likely to be a link. Don’t go confusing people by throwing in underlined text elsewhere! To draw attention to a certain word, try using the strong or emphasize tags instead.

Crime 9: Telling people to click here

The words click here have been around since the dawn of the Internet, but have been shunned aside in favour of more usable options. Using the words click here requires the user to read the whole sentence to find out what’s going to happen. Instead, describe what’s going to happen in the actual anchor link text.

Crime 10: Using justified text

This is another tip that’s heading a little deeper into accessibility but is also an important point to consider. Justified text might look at neat and square to the eye, but it can generate some real readability problems, particularly for Dyslexic users who can find it troublesome to identify words due to the uneven spacing of justified paragraphs.



Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris’ design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

Easy Fixes to Reduce Page Weight

Total page weight increased by 32% in 2013 to reach a ludicrous 1.7Mb and 96 individual HTTP requests. That’s an average figure; half of all sites will be larger. Website obesity has become an epidemic and we web developers are to blame. There are no excuses.

An overweight site will adversely affect your bottom line:

  1. The larger the download, the slower the experience. Not everyone has a 20Mb connection and this is especially true in developed western countries with aging copper infrastructures. It doesn’t matter how good your site is:users will not wait.
  2. Mobile web access has increased rapidly to reach almost one in four users. On a typical 3G connection, a 1.7MB page will take almost a minute to appear. Is there any point adopting Responsive Web Design techniques when your site won’t work effectively on those devices?
  3. Google’s page speed algorithms will downgrade your site and harm Search Engine Optimization efforts.
  4. The more code you have, the longer it takes to update and maintain.

I predicted page weight will drop this year — and I hope not to be proved wrong. Fortunately, there are a number of quick fixes which will have an instant effect on site performance. All these techniques are well known, use today’s technologies, do not take considerable time, and can be implemented on an existing codebase without the need for redevelopment.

The first three don’t actually slim your website, but put it in a corset and flattering clothing…

1. Activate GZIP compression

According to W3Techs.com, almost half of all websites do not enable compression. This is normally a server setting whichshould be enabled by your web host, although it may be possible to configure it yourself.

2. Encourage browser caching

If the browser can easily cache a file, it won’t necessarily need to download it again. Simple solutions include setting an appropriate Expires headerLast-Modified date or adoptingETags in the HTTP header.

You may be able to configure your server to handle this automatically, e.g. here is an Apache .htaccess setting to cache all images for one month:

<IfModule mod_expires.c>
ExpiresActive On
<FilesMatch "\.(jpg|jpeg|png|gif|svg)$">
ExpiresDefault "access plus 1 month"

3. Use a Content Delivery Network (CDN)

Browsers set a limit of between four and eight simultaneous HTTP requests per domain. If your page has 96 assets loaded from your domain, at best it will take twelve sets of concurrent requests before all appear. (In reality, file sizes differ so it doesn’t happen exactly like that, but the limitation still applies.)

Requesting static files from another domain effectively doubles the number of HTTP requests your browser can make. In addition, the user is more likely to have that file pre-cached because it’s been used on another site elsewhere. Easy options are JavaScript libraries such as jQuery and font repositories, but you could also consider dedicated image hosting.

These first three options help improve page speed but we’ll need to examine your code before we can actively reduce page weight…

4. Remove unused assets

Websites evolve. If you’re no longer using a widget, you can remove the associated CSS and JavaScript. If they’re contained in separate files that’s a simple job. If not, you may need to use tools such as Chrome’s Audit Developer Tool, JSLintDust-Me SelectorsCSS Usageunused-css.com or build tools such asgrunt-uncss.

5. Concatenate and minify CSS

Ideally, you require one CSS file (although a couple may be necessary if you’re using RWD to support old versions of IE). While it may be sensible to build and maintain separate CSS files, you should join them and remove unnecessary whitespace prior to hosting on your production server.

Pre-processors such as SassLESS and Stylus can do the hard work for you. Build tools including Grunt.js or Gulp can automate your workflow or, if you’d prefer a GUI, Koala provides a free cross-platform application.

If that sounds like too much effort, you can manually concatenate files in your text editor or from the command line, e.g. in Windows:

copy file1.css+file2.css file.css

or Mac/Linux:

cat file1.css file2.css > file.css

The resulting file can be run through an online CSS minifier such as cssminifier.comCSS Compressor & Minifier or CSS Compressor.

Finally, remember to load all CSS in the head so the browser knows how to style the HTML that follows and doesn’t need to redraw the page again.

6. Concatenate and minify JavaScript

The average page loads 18 individual script files. While it’s practical to keep libraries such as jQuery as separate files, your own JavaScript code should be concatenated and minified on your production server. Again, build tools can help or you can use online tools such as the YUI CompressorClosure Compileror, my personal favorite, The JavaScript CompressorRaterwhich passes your code to multiple engines so you can choose the best.

Admittedly, you need to be slightly more careful since a JavaScript compressor can fail if you have bad code — even a missing semi-colon. However, simply concatenating the files will provide a performance boost because you’re making fewer HTTP requests.

Finally, it’s best to load JavaScript just before the closing HTMLbody tag. This ensures the scripts don’t block loading of other content and page content is readable before scripts are downloaded and executed.

7. Use the correct image format

Using the wrong image format can bulk up your pages. In general:

  1. use JPG for photographs
  2. use PNG for everything else.

GIF may compress better when you have small graphics with limited color sets — although it’s rare. Some images are also more appropriate as vectors, but we’ll discuss that in a later article.

You’ll need a decent graphics package to convert images but there are plenty of free options available and some such asXnView allow you to batch process files. Remember to play with the settings:

  • JPG is a lossy format with a quality between 0 (poor, smaller file) to 100 (best, larger file). The majority of images will look fine somewhere between 30 and 70 but experiment to find the lowest acceptable value.
  • PNG is available in 256 and 24-bit color varieties. If you don’t need transparency and can limit the color pallet, the 256-color version may compress better.

8. Resize large images

An entry-level smart phone with a 3 mega-pixel camera will produce an image that is too large to display on a web page. Unfortunately, content editors will upload images directly from their camera. A little education and an automated resizing system is recommended.

Image dimensions should never exceed the maximum size of their container. If your template has a maximum space of 800 horizontal pixels, the image will not need a greater width. That said, those using high-density/Retina displays may appreciate a double 1,600 pixel width image, but that’s still smaller than typical camera output.

Resizing images has a significant effect on page weight. Shrinking the image dimensions by 50% reduces the total area by 75% and should considerably reduce the file size.

9. Compress images further

Even if you’ve switched to the correct format and resized the dimensions, it’s possible to shrink image files further using tools that analyze and optimize the graphic. These includeOptiPNGPNGOUTjpegtran and jpegoptim. Most can be installed as standalone executables or integrated into your build process. Alternatively, online tools such as Smush.it can do the work in the cloud.

10. Remove unnecessary fonts

Web fonts have revolutionized design and reduced the need for graphic-based text. However, custom fonts have a cost and may add several hundred kilobytes to your page. If you’re using more than two or three fonts, you’re possibly overdoing it. Your client/boss may love awful handwriting typefaces but, if it’s only used for one title, is it worth downloading a 200KB font file?

I suspect many sites can reduce their weight by 30-50% with a few hours of effort from a non-developer. For the average site, that’s a saving of more than 800Kb and it’ll become noticeably faster. In my next article we’ll discuss more complex optimizations which involve rewriting code.

Author acknowledgement and thanks

Craig Buckler

Contributing Editor

Craig is a Director of OptimalWorks Ltd, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

List all mail accounts in Plesk using MySQL command

In order to list all email accounts in Plesk , first login to the server with user who has access to ‘MySQL’. Usually this is ‘root’, but depending on the setup of the server it could be different.

Connect to the Plesk database :

mysql -uadmin -p
Enter password:
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 71211 to server version: 4.1.20
Type 'help;' or '\h' for help. Type '\c' to clear the buffer.
 Or use this lazy command to access Plesk MySQL databse which will login you to the MySQL server and will change the database automatically:
mysql -uadmin -p`cat /etc/psa/.psa.shadow` psa

If you have chosen the first method make sure that you are going to use the correct Plesk database, list the databases and make active the ‘psa’ one as in the example bellow. If you have chosen the second one – you are already using the ‘psa’ table.

mysql> show databases
 -> ;
 | Database |
 | horde |
 | lucy |
 | mysql |
 | phpmyadmin_DItFrLggnXvJ |
 | phpmyadmin_ZtLmKwBWuwdF |
 | psa |
 | valuer |
 7 rows in set (0.01 sec)
mysql> use psa;
Reading table information for completion of table and column names
 You can turn off this feature to get a quicker startup with -A
Database changed

Now to list all Plesk mail accounts, use the command in the next field.

SELECT CONCAT_WS('@',mail.mail_name,domains.name),accounts.password FROM domains,mail,accounts WHERE domains.id=mail.dom_id AND accounts.id=mail.account_id ORDER BY domains.name ASC,mail.mail_name ASC;

Just copy and paste the above line in your MySQL
The result will show all available Plesk mail accounts inside the ‘psa’ database.



Tip by Anthony Gee | Apr 2010

7 Easy Ways to Get Your Identity Stolen

Sue Marquette Poremba, TechNewsDaily Contributor
April 02 2013 07:30 AM ET
Let’s face it — protecting your identity from thieves gets harder by the day.

The moment you give your personal information to another entity — a bank, the DMV or even a medical provider — you give up control over that information and how it might be used.

“Eventually, these organizations with which you entrust your personal information will be breached,” said Denis G. Kelly, a Miami-based identity-theft prevention expert and author of “The Official Identity Theft Prevention Handbook” (Sterling & Ross, 2011).

“Heck, even organizations that you don’t authorize to have your personal information are breached, such as the credit reporting agencies” Kelly said.

Short of hiding in a closet and using cash only for purchases, every person is at risk ofidentity theft. That’s the sad reality.

We can’t control what happens when we willingly share our information with a company or with friends.

But too often, we make the identity thieves’ job a lot easier by being careless with our personal information, our financial information and our Internet use.

There are several stupid things people do every day that make it easier for thieves to steal their identities. Here are a few.

Give your personal information to people who call or email you

That nice-sounding lady calling from the bank says she needs your account number. That official-looking email message from the IRS says the agency needs your Social Security number — won’t you please click on this link to do so?

Don’t believe them. Organizations dealing with personally identifiable information, especially financial information, rarely send emails or make unsolicited calls.

Don’t give your personal information, including credit-card numbers or Social Security numbers, to anyone calling you on the phone or sending unsolicited email messages.

You have no way of knowing whether or not that caller is legitimate, or whether than email message came from the purported sender.

If you feel you absolutely must respond, call the institution in question — and make sure you get its number from a phone book.

[Phone Scammers Fleece Retiree Out of House and Home]

Post personal information on social media

The more personal details you post on a social media site, the easier you make it for a thief to steal your identity.

Think about your Facebook profile, for instance. Do you list your full birth date and year, as well as your childhood hometown? What about your parents’ full names?

If so, you’ve just given a thief enough information to take over your identity without him having to break a sweat.

[11 Facebook Privacy Steps to Take Now]

Carry your Social Security card in your wallet

If your wallet is stolen with your Social Security card in it, the thief won’t just have your money, your driver’s license and your credit cards — he’ll also have your identity.

Writing down the number on a piece of paper in your wallet is just as risky, as is storing the number on your cellphone. (Stolen cellphones, especially smartphones loaded up with social media and online banking apps, are bonanzas for identity thieves.)

It’s better to memorize your Social Security number, and to store the card in a locked safe or safe-deposit box.

Similarly, check other ID cards — Medicare cards, for example — to make sure they don’t include your Social Security number. If they do, toss those in the safe as well.

[Asking for Identity Theft: The Risks of Social Security Number Overuse]

Access the Internet over public or insecure Wi-Fi networks

“While it may be convenient to sip on a latte at Starbucks while reviewing your online bank account, public Wi-Fi is a feeding ground for identity thieves,” Kelly said.

Similarly dangerous are open Wi-Fi networks in parks, airports, shopping malls, museums and libraries.

Protect yourself from Wi-Fi snoops by installing virtual private network (VPN) software, which will encrypt all Internet traffic on your laptop, smartphone or tablet.

[How a Virtual Private Network Can Boost Your Security]

Throw away mail, checks and financial documents intact

Thieves are not above going through your trash hoping they’ll find your full name and address, bank receipts, credit card statements or even canceled or voided checks.

Do the smart thing: Tear up anything with your name on it, and use a shredder for any document with financial information.

[How to Shred Documents and Stop Identity Theft]

Leave outgoing mail in your mailbox

It’s convenient to leave outgoing mail in your mailbox for the mail carrier to pick up. It’s also convenient for identity thieves, who raid residential mailboxes looking for bill payments. After all, your personal checks are a jackpot of information.

Do the smart thing — drop off the mail in an official mailbox or take it to a post office.

[10 Tips for Staying Safe During Tax Season]

Let online retailers save your credit-card number

Almost every store selling things online, from Amazon to your local stops, will offer to save your credit-card number so you won’t have to type it in next time.

“It is convenient, but also puts you in jeopardy if they are hacked,” said Steven J.J. Weisman, a Boston-area lawyer and college professor at Bentley University in Waltham, Mass. “And they will be hacked.”

Don’t be among the victims the next time a huge data breach happens. Decline the online retailers’ offers, and type in your credit-card number every time.

[5 Steps to Better Credit-Card Security]

Leave outgoing mail in your mailbox

It’s convenient to leave outgoing mail in your mailbox for the mail carrier to pick up. It’s also convenient for identity thieves, who raid residential mailboxes looking for bill payments. After all, your personal checks are a jackpot of information.

Do the smart thing — drop off the mail in an official mailbox or take it to a post office.

[10 Tips for Staying Safe During Tax Season]

Essential WordPress Plugins for 2013

One of the great things about WordPress (apart from the amazing themes, of course!) is the plugin system, which allows users to “plug in” bits of pre-built functionality to their site.

Here at WPZOOM we’re often asked to recommend WordPress plugins to add various features to people’s sites, so here we’ve rounded up some of the top essential plugins for running a powerful WordPress site in 2013.

WordPress SEO

Yoast’s WordPress SEO Plugin is hands-down one of the best plugins for WordPress SEO around and is used by hundreds of thousands of bloggers.

The plugin’s main strength comes from the comprehensive options: WordPress SEO does everything you’d expect a good SEO plugin to do, and it does it very well. That’s why we recommend using it to help power your site up the rankings.

Digg Digg

Despite using the name of a social sharing site which is a shell of its former self, make no mistake: the Digg Digg plugin is not one you want to miss out on.

Using a style first pioneered by the tech blog Mashable, Digg Digg adds a set of social sharing buttons which ‘float’ alongside your content and then scroll with the page.This creates a great opportunity for promoting your content on social media and it’s devastatingly effective at doing so. Don’t miss out on free promotion!

W3 Total Cache/WP Super Cache

The two giants in WordPress caching, running one (although not both) of these plugins is essential for virtually all sites running WordPress.

A caching plugin creates a copy of your site and then displays that to visitors, rather than generating a unique copy for each visitor. This allows your site’s server to use fewer resources, resulting in the site loading faster.

It doesn’t matter which one of these two plugins you’re using, as long as you’re using one of them. It’s likely the performance of each one will differ slightly on your host, so make sure you test out both and see which works best for you.


Many of WPZOOM’s themes come with built in ‘responsive’ mobile support, with the theme automagically shrinking to fit your screen size on mobile or tablet. With widespread use of smartphones, especially as a way of consuming information, these mobile-friendly themes are great to have.

Not all our themes are responsive, however, and on the ones that are, sometimes something a little more lightweight is required. Here steps in the WPTouch plugin which, when activated, applies a specially-built theme to your site when viewed on mobile. The mobile theme itself is nothing exceptional, but it’s functional and it works, so for a mobile plugin, look no further.

Easy Digital Downloads

In the current difficult economic climate, many site owners are looking to diversify their income by selling items and downloads through their websites. If that’s you, then this is the plugin which is going to empower your selling.

Easy Digital Downloads, as the name suggests, provides an easy way for you to sell downloads via your WordPress-powered site. The plugin itself is free, but extra premium ‘addons’ are available which add extra functionality. If you want a simple way to monetize your site, this is the way to do it.


Made by Automattic, in part the same people behind the WordPress project, Jetpack brings some of the super-handy functionality enjoyed by WordPress.com users — such as caching of images on a super-fast CDN, website stats and spelling and grammar checking — to WordPress.org users (like you!).

Jetpack adds a bunch of functionality, and is a really handy plugin to have around, so make sure you check out the full list of features and get it added to your site!

Hello Bar


If you want people to do something when they visit your website, be that purchase your book, contact you or read a special report you’ve written, the Hello Bar is a great way of increasing your conversion rate — or in plain English: getting people to do what you want them to do.

The plugin adds a “Hello Bar” across the top of your site, which gives you a short space for your message and then has a call to action. You’ll need to sign up for a free account on HelloBar.com, but with that done, there’s nothing more to do, except sit back and watch your conversion rate fly through the roof!



Though this is not a revolutionary plugin, it does something that misses in WordPress: the ability to edit files included in theme subfolders. WordPress Theme Editor is great, but it doesn’t allow you to edit all the files from a theme, and since many of our themes include multiple files organized in sub-folders, it becomes impossible to find those files when you want to edit them. Here WPIde plugin comes in help and let you modify anything you want, without having to leave the WordPress Dashboard.



WPThumb is also a useful plugin which does something that we think should be included in WordPress. It allows you to choose the cropping position of the images that you upload asFeatured Image. This way you can make sure that you don’t end up with badly cropped thumbnails. To enable this feature in your theme, just follow instructions from this topic.
Written by 

Be Paranoid!

As a Certified Ethical Hacker, I searched for a script which would help me to detect unauthorized file changes. I found a script (probably in the User Contributed Notes at php.net) which I modified to have working very nicely on my “test server” (Windows) as well as on my “production” server (Linux).

The logic is simple: “Build a database of hashed values for vulnerable files (those which hackers will modify to execute code on your server) and compare those values to the actual hashes on a regular basis and report added, changed and deleted files.”

Obviously, the code to traverse a server’s directory structure and provide hash values is far more complex than the statement above. I will go through the code for the production server.

Database Setup

For security, use a separate database for this which does not share access credentials with any other database. Use cPanel to create the new database and the new user with a strong password (I recommend a 16 character password generated by strongpasswordgenerator.com) and an innocuous name like baseline. Then use PHPMyAdmin’s SQL to create two tables:

    CREATE TABLE baseline (
        file_path VARCHAR(200) NOT NULL,
        file_hash CHAR(40) NOT NULL,
        acct VARCHAR(40) NOT NULL
        PRIMARY KEY (file_path)

    CREATE TABLE tested (
        tested DATETIME NOT NULL,
        account VARCHAR(40) NOT NULL
        PRIMARY KEY (tested)

The first table, “baseline,” contains a large field for your path/to/filenames, a fixed field for the file_hash(40 characters are required for SHA1) and acct to allow me to monitor accounts or domains separately. Set the file_path as the Primary Key.

The “tested” table will hold the DATETIME of every scan and the account is the same as baseline’s acct field so it will allow you to scan various accounts or domains and keep their data separate.

Initialize the PHP File:

First, DEFINE several constants

  • PATH is the physical path to the start of your scan, which is usually the DocumentRoot. Just remember not to use Windows’ backslashes because both Apache and PHP will be looking for forward slashes.
  • Database access constants SERVER ('localhost'), USERPASSWORD and DATABASE.

and several variables

  • An array of the file extensions to examine. Because not all files are executable on the server, I only scan.php.htm.html and .js files and these need to be specified in an array. Note than an empty array will force ALL files to be scanned (best for security but uses the most server resources).
  • Directories to exclude. Iif you have a directory containing malware, shame on you! In any event, if you need to exclude a directory for any reason, you have the opportunity to list them in an array. Don’t omit any directories just because you only stored images or pdf files, though, there because a hacker can put his files in there, too!
  • Initialize the variables you’re about to use: The $file array as an empty array(), the $report string as an empty string and the $acct string (use the account/acct name from your database tables) need to be initialized.


Let’s get started!

//          initialize
$dir = new RecursiveDirectoryIterator(PATH);
$iter = new RecursiveIteratorIterator($dir);
while ($iter->valid())
    //          skip unwanted directories
    if (!$iter->isDot() && !in_array($iter->getSubPath(), $skip))
        //          get specific file extensions
        if (!empty($ext))
            //          PHP 5.3.4: if (in_array($iter->getExtension(), $ext))
            if (in_array(pathinfo($iter->key(), PATHINFO_EXTENSION), $ext))
                $files[$iter->key()] = hash_file("sha1", $iter->key());
        } else {
            //          ignore file extensions
            $files[$iter->key()] = hash_file("sha1", $iter->key());

What we’ve just done is use the RecursiveIteratorIterator() function (a function used to iterate through recursive iterators)  on the directory ($dir) as it iterates through the directory structure. The first thing it does is check whether a directory has been banned from the iteration then branch depending upon whether file extensions had been specified. The result is a two-dimensional matrix of files, ($files), with path/name.extas the index and corresponding SHA1 hash value.

I’ll note here that the commented echo statements were used on my Windows test server without linking to the SMTP server but you’ll need to uncomment them if you need to verify the correct functionality.

The file count can be provided immediately by the files array:

$report .= "Files has " . count($files) . " records.\r\n";

The output, whether to your test monitor or email, has just been given its first non-empty value: the hashed file count.


Last Hash Scan

The next thing to do is fetch the data/time the last hash scan was accomplished and get the stored path/file and hash set from the database.

$results = mysqli_query($db,"SELECT tested FROM tested WHERE acct = '$acct'
    ORDER BY tested DESC LIMIT 1");
if ($results)
        $tested = $result['tested'];
$report .= "Last tested $tested.\r\n";


Compare Hashed Files with Database Records

So far, we’ve only learned the current file count and datetime of the last scan. The value we’re looking for is to identify the changed files, i.e., those added, changed or deleted. Let’s create an array of the differences.

//          identify differences
if (!empty($files))
    $result = mysqli_query($db,"SELECT * FROM baseline");
    if (!empty($result))
        foreach ($result as $value)
            $baseline[$value["file_path"]] = $value["file_hash"];
            $diffs = array_diff_assoc($files, $baseline);

//          sort differences into Deleted, Altered and Added arrays
if (!empty($files))
    $results = mysqli_query($db,"SELECT file_path, file_hash FROM baseline WHERE acct = '$acct'");
    if (!empty($results))
        $baseline = array();      //          from database
        $diffs = array();         //          differences between $files and $baseline
                                  //          $files is current array of file_path => file_hash
        while ($value = mysqli_fetch_array($results))
            if (!array_key_exists($value["file_path"], $files))
                //          Deleted files
                $diffs["Deleted"][$value["file_path"]] = $value["file_path"];
                $baseline[$value["file_path"]] = $value["file_hash"];
            } else {
                    //          Altered files
                    if ($files[$value["file_path"]] <> $value["file_hash"])
                        $diffs["Altered"][$value["file_path"]] = $value["file_path"];
                        $baseline[$value["file_path"]] = $value["file_path"];
                    } else {
                            //          Unchanged files
                            $baseline[$value["file_path"]] = $value["file_hash"];
        if (count($baseline) < count($files))
            //          Added files
            $diffs["Added"] = array_diff_assoc($files, $baseline);

When completed, the $diffs array will either be empty or it will contain any discrepancies found in the multi-dimensional array sorted by Deleted, Altered and Added along with the path/file and associated hash pairs for each.


Email Results

You will need to add the discrepancies to the report and email.


//          display discrepancies
if (!empty($diffs)) {
$report .= "The following discrepancies were found:\r\n\r\n";
foreach ($diffs as $status => $affected)
    if (is_array($affected) && !empty($affected))
        ($test) ? echo "<li>" . $status . "</li>" : $report .= "* $status *\r\n\r\n";
        ($test) ? echo "<ol>" : '';
        foreach($affected as $path => $hash) $report .= " • $path\r\n";
} else {
    $report .= "File structure is intact.\r\n";

$mailed = mail('you@example.com', $acct . ' Integrity Monitor Report',$report);


Update the Database

You’re not finished yet!

//          update database
//          clear old records
mysqli_query($db,"DELETE FROM baseline WHERE acct = '$acct'");

//          insert updated records
foreach ($files as $path => $hash)
    mysqli_query($db,"INSERT INTO baseline (file_path, file_hash, acct)
        VALUES ('$path','$hash', '$acct')");

mysqli_query($db,"INSERT INTO tested (tested, acct) VALUES (NOW(), '$acct')");


On the first pass, there will be nothing in the database’s baseline table and ALL files will display as Added so don’t be alarmed.

Now that you have the code, where do you upload it? Don’t even consider placing this code in your webspace (under the DocumentRoot) as that will mean that anyone can access your file and delete the saved information to invalidate your hash scans. For simplicity, put it in the same directory of your account which holds public_html (or similar) directory.



Now that you have the code, you need to have it activated on a regular basis. That’s where the CRON function of the server excels! Simply use your cPanel to create a new CRON job, set the time in the middle of the night when your server should be nearly idle (you don’t want to interfere with or delay visitors’ activities, which also means you should limit yourself to a single scan per day) and use the following directive:

/usr/local/bin/php -q /home/account/hashscan.php

where /usr/local/bin/php is the location of the server’s PHP executable and/home/account/hashscan.php is the path to your hashscan.php script (or whatever name you gave it).



We have created a new database with two tables, one to hold the dates and one to hold the baseline hashes. We have initiated every scan by identifying the file types (by extension) that we need to track and identified the start point (DocumentRoot) for our scan.

We’ve scanned the files avoiding the unwanted directories and compared the hashes against the baseline in the database. Closing the process, we’ve updated the database tables and either displayed (on a test server) or emailed (from the production server) the results. Our CRON job will then activate your hash scan on a regular basis.

This ZIP file contains the above CreateTable.sqlhashscan.php and CRON.txt files.

This is but one part of securing your website, though, as it will only inform you of changes to the types of files you’ve specified. Before you get this far, you must ensure that your files are malware free (maldet scans established by your host can do this but be sure that you keep a clean master copy off-line), ensure that no one but you can upload via FTP (by using VERY strong passwords) and keep “canned apps” up to date (because their patches are closing vulnerabilities found and exploited by hackers and their legions of “script kiddies”).

In summary, BE PARANOID! There may be no-one out to get you but there are those out for “kicks” who are looking for easy prey. Your objective is to avoid that classification.


Acknowledgements and thanks to

DK Lynn

(as seen in Sitepoint.com)
DK Lynn is a former instructor pilot and “rocket scientist” now living in New Zealand where he operates a small business developing and hosting web sites.


# @ http://perishablepress.com/5g-blacklist-2013/
<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteCond %{QUERY_STRING} (\"|%22).*(<|>|%3) [NC,OR]
 RewriteCond %{QUERY_STRING} (javascript:).*(\;) [NC,OR]
 RewriteCond %{QUERY_STRING} (<|%3C).*script.*(>|%3) [NC,OR]
 RewriteCond %{QUERY_STRING} (\\|\.\./|`|=\'$|=%27$) [NC,OR]
 RewriteCond %{QUERY_STRING} (\;|\'|\"|%22).*(union|select|insert|drop|update|md5|benchmark|or|and|if) [NC,OR]
 RewriteCond %{QUERY_STRING} (base64_encode|localhost|mosconfig) [NC,OR]
 RewriteCond %{QUERY_STRING} (boot\.ini|echo.*kae|etc/passwd) [NC,OR]
 RewriteCond %{QUERY_STRING} (GLOBALS|REQUEST)(=|\[|%) [NC]
 RewriteRule .* - [F]
<IfModule mod_setenvif.c>
 # SetEnvIfNoCase User-Agent ^$ keep_out
 SetEnvIfNoCase User-Agent (binlar|casper|cmsworldmap|comodo|diavol|dotbot|feedfinder|flicky|ia_archiver|jakarta|kmccrew|nutch|planetwork|purebot|pycurl|skygrid|sucker|turnit|vikspider|zmeu) keep_out
 <limit GET POST PUT>
 Order Allow,Deny
 Allow from all
 Deny from env=keep_out
<IfModule mod_alias.c>
 RedirectMatch 403 (https?|ftp|php)\://
 RedirectMatch 403 /(https?|ima|ucp)/
 RedirectMatch 403 /(Permanent|Better)$
 RedirectMatch 403 (\=\\\'|\=\\%27|/\\\'/?|\)\.css\()$
 RedirectMatch 403 (\,|\)\+|/\,/|\{0\}|\(/\(|\.\.\.|\+\+\+|\||\\\"\\\")
 RedirectMatch 403 \.(cgi|asp|aspx|cfg|dll|exe|jsp|mdb|sql|ini|rar)$
 RedirectMatch 403 /(contac|fpw|install|pingserver|register)\.php$
 RedirectMatch 403 (base64|crossdomain|localhost|wwwroot|e107\_)
 RedirectMatch 403 (eval\(|\_vti\_|\(null\)|echo.*kae|config\.xml)
 RedirectMatch 403 \.well\-known/host\-meta
 RedirectMatch 403 /function\.array\-rand
 RedirectMatch 403 \)\;\$\(this\)\.html\(
 RedirectMatch 403 proc/self/environ
 RedirectMatch 403 msnbot\.htm\)\.\_
 RedirectMatch 403 /ref\.outcontrol
 RedirectMatch 403 com\_cropimage
 RedirectMatch 403 indonesia\.htm
 RedirectMatch 403 \{\$itemURL\}
 RedirectMatch 403 function\(\)
 RedirectMatch 403 labels\.rdf
 RedirectMatch 403 /playing.php
 RedirectMatch 403 muieblackcat
<ifModule mod_rewrite.c>
 RewriteRule .* - [F]
# 5G:[BAD IPS]
<limit GET POST PUT>
 Order Allow,Deny
 Allow from all
 # uncomment/edit/repeat next line to block IPs
 # Deny from 123.456.789

Google Hangouts se adapta a tu ancho de banda

bandwidth-usage-screenshot Hangouts se actualiza con control de ancho de banda y modo “sólo audio”
Por Sirag Nabih el día 8 febrero, 2013
Todos hemos sufrido las penurias de intentar hacer una videollamada utilizando una conexión a internet poco potente. Desde hoy, Google+ incluye un sistema que puede ayudarnos en estas situaciones.

Nada menos que un controlador de ancho de banda que, con cuatro niveles, mejorará o empeorará la calidad de la llamada para que no sufra cortes. Dicho de otra manera, Hangout te permitirá ser sincero contigo mismo y tu conexión a internet y hacer una videollamada de baja calidad pero fluída en lugar de una con más resolución que se corte a cada momento.

El nivel de ancho de banda más bajo de los cuatro desactiva el vídeo y convierte el Hangout en una llamada únicamente de audio. No verás la imagen, pero podrás mantener la comunicación.

Este nuevo sistema empezará a llegar hoy escalonadamente a los perfiles de Google+. Todavía no se sabe nada sobre si se adoptará también en las versiones de iPhone y Android de Google+.