Google Take Out y las copias de seguridad

Mucha gente me dice cosas cómo que no sube sus fotos a google porque "no se fían de que alguien podría mirarlas", esa misma gente tiene un disco duro portátil con sus vida dentro y al cabo de un tiempo te llaman preguntando "no me detecta el disco duro ¿que hago?".

También hay otros que confían ciegamente en las cuentas de google y un día se levantan y google les dice "¿cuenta? ¿que cuenta?" (si, eso pasa).

Lo ideal, aunque bastante coñazo, es tenerlo en varios soportes y con cierta distancia entre ellos (que no se te queme la casa y pierdas tu vida entera). En mi opinión:

1. En la nube: Google drive está bien aunque yo prefiero dropbox.
2. En un disco duro: para almacenar los gigas y gigas es lo más barato y rápido.
3. Soportes ópticos: Bluray, DVD, cds... No son magnéticos y no tienen partes móviles, pero eso si, se rallan.
4. Pendrives / tarjetas SD: Ya no son muy caras y para guardar lo más importante son bastante seguros.

Hace poco me han fallado 3 discos duros y me he alegrado de tener muchas cosas en la nube. Pero tenía que hacer nuevas copias de seguridad ¿cómo? No voy a descargarme mis emails/archivos uno por uno.

Pues existe esta aplicación web llamada Google take out, que te permite básicamente bajarte toda tu cuenta (emails, docs, picasa, youtube, etc) a un disco duro para tenerlo a buen recaudo, incluso por si quieres borrarte de google. Te lo comprime en archivos de 2 Gb, por lo que copiarlo a un dvd se hace bastante fácilmente.

Zen Coding: HTML ninja en sengundos.

A veces te llega alguien que te dice que el hace webs con dreamweaver, "qués mu bueno", te dicen, y por dentro ya estás intentando clasificarlo en una subespecie de patán.

"Dreamweaver es muy rápido para hacer tablas, o para hacer listas, le das a este botón y ya está"

Entonces sacas tu pendrive con tu Notepad++ portable, por que si, por que eres así de Geek y le dices ¿una tabla? ¿con 5 filas y 3 columnas?¿si? y escribes

table>tr*5>td*3

pulsas ctrl+alt+enter

y se transforma en esto

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


Con el orgullo herido el patán te puede mentir diciendo que el tarda lo mismo, entonces dices si? vamos a hacer una lista que tenga un id "mimenu" y 10 elementos li cada uno con una clase que sea miclase1, miclase2 hasta 10 ¿vale? pues el reloj empieza a correr AHORA!

ul#mimenu>li.miclase$*10

Incluso si tecleas con los índices no debes tardar más de 10 segundos en escribir esto para obtener esto

<ul id="mimenu">
<li class="miclase1"></li>
<li class="miclase2"></li>
<li class="miclase3"></li>
<li class="miclase4"></li>
<li class="miclase5"></li>
<li class="miclase6"></li>
<li class="miclase7"></li>
<li class="miclase8"></li>
<li class="miclase9"></li>
<li class="miclase10"></li>
</ul>

desglose de la expresión Zen para hacer esto

• ul = etiqueta ul
• # = id
• mimenu = valor del id
• > contiende
• li = etiqueta li
• . = con la clase
• miclase = valor de la clase
• $ = variable que se incrementa, sumado al punto anterior: miclase1, miclase2...
• *10 = repite este elemento diez veces

Se pueden hacer muchas cosas más con Zen coding, como que te ponga el doctype y demás, aquí tenéis la ayuda oficial y es muuuy sencillo.

Para instalarlo en el notepad++:

Plugins->Plugin Manager->show plugin manager->marcáis Zen Coding->install

Os dice que necesita otro, le decís que si a todo y reiniciáis . Ya estáis preparados para hacerle todo un ZETOB a cualquier patán como el de batman y robin

Google Reader Readable: mejor google reader

¿Usas chrome? ¿te gusta el Google Reader? ¿no es un coñazo el tamaño, la letra, la estructura y los colores de los feeds de noticias?
Pues no llores más, instala el Google Reader Readable en chrome y llegarás hasta a relajarte al leer el reader, lo verás como esto:

Strict Pomodoro: productividad en el navegador

La técnica pomodoro es bien sencilla:

1. Divide tu trabajo en tareas
2. Trabaja 25 minutos en una tarea y si puedes termínala
3. Descansa 5 minutos (lee, haz ejercicio, etc)
4. Cada 5 sesiones de los puntos 2 y 3 descansa 25 minutos

La verdad es que es bastante útil delante del ordenador, sin embargo uno tiende a distraerse, que si facebook, que si reader, que si mira que chulo este vídeo de youtube, en fin que a veces necesitamos un buen guardián y para eso está la extensión strict pomodoro, que además de cronómetro te servirá para impedirte que te distraigas con páginas tal que así.

Nada de facebook hasta dentro de 18 minutos...

css3 calc y caniuse.com

"Yo he comido ratas en el desierto" bueno no, pero si que he aprendido CSS por las bravas, cometiendo muchos errores, porque cuando yo empecé apenas había web especializadas, y nadie de mi entorno tenía la menor idea.

Bueno, pues por aquel entonces eché mucho de menos un atributo CSS3 nuevo llamado "Calc" que lamentablemente sólo soporta el 37% de los navegadores.

¿Que es calc? pues puedes hacer cálculos simples en css ¿alguna vez queríais poner el ancho del 80% y que el margin, padding y border se quite de ahí? Yo muchas veces (normalmente le añadía uno o dos divs para tener estas cosas pero así es mejor).

Pues imagina esto


#cuerpo {
margin:0 10px;
padding:0 15px;
border-left:1px red solid;
border-right:1px red solid;

width:calc(80% -2*10px - 2*15px -2px)
-moz-width:calc(80% -2*10px - 2*15px -2px)
-webkit-width:calc(80% -2*10px - 2*15px -2px)
-o-width:calc(80% -2*10px - 2*15px -2px)

}

si, los prefijos son un rollo ¿puedo usar Calc? pues me he dado cuenta de que en realidad no.
Gracias a mi recién descubierta página web caniuse.com (puedousar.com en español) te mide quien soporta estas características.
http://caniuse.com/calc (32%)
http://caniuse.com/svg (imágenes svg) (73%)

Herramientas muy útiles ambas espero que os sirvan.

Si hubiera un CSS4 sería cómo Less (o sass)

¿Llevas tiempo haciendo CSS? ¿te resulta sencillo pero bastante coñazo? ¿CSS3 se te queda corto?
Pues tranquilo llegan las librerías para hacer que el CSS sea más rápido y sencillo de escribir. Y no hay que esperar a que la W3C de su visto bueno.

Hay muchas librerías que hacen esto en la actualidad, están intentando convertirse en un standard, como el jquery para javascript, pues esto para CSS.
Las más famosas son LESS ("menos"), SASS ("hablar con descaro" ¿?) y Stylus. Pero la batalla final parece que se está debatiendo entre LESS y SASS.

¿Cómo funcionan? son programitas que leen sus archivos (.less y .scss respectivamente) y te devuelven el CSS de toda la vida de dios que puedes adjuntar a tu página web.

Aunque algunos dicen que SASS esta un poquito mejor hecho yo me voy con LESS ¿Por qué?
Para probar LESS es tan fácil como incluir estas líneas en el head tu HTML,  y si te gusta te instalas lessPHP para que el usuario no cargue la libería.

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script> Para probar SASS es un follón, tienes que instalar ruby, dentro sass, compass también...

Siempre digo que el CSS es un lenguaje interpretado pero no de programación (aunque con las animaciones uno ya no sabe...) con estas herramientas ya no está tan claro.
Ejemplos de uso
Imaginad que tenemos un color principal (#e5c138 en este caso) que vamos a usar en la página en diferentes formas y muchas veces:


p {
background:#e5c138;
}
a {
color:#e5c138;
background:#cccc;
}
h2 {
border:1px #e5c138 solid;
}
De esta forma tenemos que recordar el color continuamente y si queremos cambiarlo en toda la página hay que hacerlo 200 millones de veces.
Bien, pues con Less se usaría una variable


@colorPrincipal: #e5c138;


p {
background: @colorPrincipal;
}
a {
color:@colorPrincipal;
background:#cccc;
}
h2 {
border:1px @colorPrincipal; solid;
}

Si quisiéramos cambiar el color principal sólo tendríamos que poner "@colorPrincipal: #fffaaa;" y cambiaría en toda la página.

Mirad este anidamiento, en CSS repetimos #header mil veces

#header { font-family:arial, verdana, sans-serif; }
#header h1 {
     font-size:26px;
     font-weight:bold;
}
#header p { font-size:12px; }
#header p a { text-decoration:none; }
#header p a:hover { border-width:1px; }
En el .less queda más claro y sin tanta repetición:

#header {
  font-family:arial, verdana, sans-serif;
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

Y mi preferido, los mixins, una especie de funciones (hay otras funciones avanzadas).
Imaginemos que queremos aplicar esquinas redondeadas y no poner 20 veces los prefijos de los navegadores, sería así

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}


#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}
El #header tiene el valor por defecto (5px) como podréis suponer se puede anidar clases de forma muy chula, imaginad que quiero hacer un botón siempre igual.


.botones-redondeados{
.rounded-corners(20px);
color:@colorPrincipal;
background:@colorSecundario;
}


Podéis hacer vuestros pinitos de prueba en la web de phpless online  Y tenéis con un poco más de profundidad estos ejemplos en la mágnífica web de anieto2k: LESS y SASS

Teclado en el notepad++: Hacer el doble en la mitad de tiempo

d8b   db  .d88b.  d888888b d88888b d8888b.  .d8b.  d8888b. 
888o  88 .8P  Y8. `~~88~~' 88'     88  `8D d8' `8b 88  `8D 
88V8o 88 88    88    88    88ooooo 88oodD' 88ooo88 88   88 
88 V8o88 88    88    88    88~~~~~ 88~~~   88~~~88 88   88 
88  V888 `8b  d8'    88    88.     88      88   88 88  .8D 
VP   V8P  `Y88P'     YP    Y88888P 88      YP   YP Y8888D' 
                                                           
           

Una mano en el ratón y otra a la izquierda del teclado. Así deberías estar siempre. No es una manía, se trata de ser eficiente.

Atajos de teclado que uso en notepad++ 100 veces al día, y algunos que he descubierto sobre la marcha:

• CTRL+D: Duplicar. Si no tienes seleccionado texto duplica la línea entera (sin perder el portapapeles)
• CTRL+J: Unir líneas. Copias un texto de un PDF y tiene 8 líneas con 4 palabras cada una, pues las seleccionas, usas este atajo y listo calisto
• CTRl+U, CTRL+MAYUS+U: Pasas de mayúsculas a minúsculas y viceversa.
• CTRL+TAB: Alternar entre documentos, este atajo sirve para todos los prograbas que tienen pestañas.
• CTRL+W: Cerrar pestaña actual.
• CTRL+G: Ir al número de línea X.
• CTRL + F, CTRL+H: Buscar y buscar y reemplazar. Puedes usar CTRL+R para buscar con expresiones regulares. Si has cerrado el cuadro pulsa F3 para repetir la última búsqueda.
• TAB, MAYUS+TAB: Selecciona varias líneas y ponle/quítale un tabulador al principio de estas.
• CTRL+Q, CTRL+MAYUS+Q: Comentario y comentario simple. Muy importante para tenerlo todo clarito en nuestro código.
• CTRL+A: Seleccionar todo, como siempre.
• CTRL+S: Seleccionar todo, como siempre.
• CTRL+Z: El omnimpresente deshacer.
• CTRL+F2, F2: añadir marca de importante a la línea, ir a la siguiente línea importante.
• CTRL+ALT+F,CTRL+ALT+MAYUS+F:Expandir contraer la vista actual

Otros atajos que he creado en Configuración->Gestor de atajos de teclado

ACTUALIZACIÓN, CUIDADO!: No se si será mi ordenador pero al cambiar algunos atajos principales (f1, por ejemplo) se borra toda la configuración de todo el NPP.

• CTRL+MAYUS+R: Main-> Copia la ruta de la carpeta (al portapeles). MUY ÚTIL para localizar en disco donde está ese archivo
• CTRL+ALT+ESPACIO: Main->Quitar espacio al inicio de la línea.
• CTRL+ALT+E: Plugins->E:Delete Blank lines. Para quitar líneas que no tienen nada dentro. Si tienen espacio al principio no las quitará.
• CTRL+MAYUS+W: Main->Cerrar las DEMAS pestañas.
• CTRL+MAYUS+<: Plugins->Show NppFTPWindow, mostrar la ventana FTP.

Wolfram Alpha, un motor de conocimiento

Lo conocí en 2009 y ya me pareció la leche, pero no ha sido hasta este año cuando está pegando fuerte, Wolfran Alpha es un buscador de conocimiento, dame un minuto, un poco de inglés y te daré el mundo.

En google también se busca conocimiento ¿no? pues no. Google busca palabras, relacionadas entre si, vale, pero palabras.
¿Que pasa cuando quieres buscar la respuesta a un problema?, no necesitas datos, necesitas el conocimiento para resolverlo. Eso te lo resuelve Wolfram alpha.

¿Quieres un ejemplo? El otro día jugábamos al Colonos de Catán y nos preguntábamos qué posibilidades había de que con dos dados de 6 saliese un 6 o un 7.

Pues pones en inglés:
What are the chances to get a six with two six faced dices?
te enseña todas las posibilidades y más o menos una entre siete.
Pero y un 7?
What are the chances to get a seven with two six faced dices? Una entre 6
Te salen hasta las caras del dado.

Le puedes hacer todo tipo de preguntas, por ejemplo:

• oxygen consumed by a human being in one hour
• name of people who walked on the moon
• calories 250 grams of rice
• biggest reptile

Este buscador lo usa Siri el buscador de iPhone (un 25% he leido por ahí) y hace poco los de Apple trucaron las cosas para que cuando se le pregutaba por el mejor teléfono (The best smartphone) en lugar de decir el Nokia Lumia (que tampoco...) dijera que el que estaba sujetando el usuario en su mano, es decir un iPhone. En fin, si posees el hipódromo tus caballos son siempre ganadores.

Pero he descubierto algo curioso ¿que pasa si le preguntas al bueno de Wolfram por el mejor motor de búsqueda?
"the best search engine", os dejo que lo descubráis.

Tuneos para Notepad++

No se vosotros, pero he probado varios editores de código pero me quedo con Notepad++ (Npp). Es una pena que no lo haya para Linux de forma nativa, y si, he probado Scite, bluefish, gedit con extensiones, pero no llego a sentirme tan cómodo como con este editor.

Lo tengo en un portable en google Drive y lo ejecuto desde ahí. De esta forma mis preferencias se mantienen entre equipos y si lo actualizo se "propaga" allí donde lo uso.

Esto es lo que hago cuando se lo instalo a alguien

• Plugin TextFx: Para hacer webs es vital. Entras en Plugins->Plugin Manager -> textfx Characters. Después de instalarlo, me voy a TextFX->TextFX settings-> Marcar: autoclose [{( brace y autoclose HTML tags. Para que te cierrer las etiquetas HTML además de todos los paréntesis. Si estás usando un php (como las plantillas de joomla) y no te cierra el HTML es tan sencillo como que le pongas en Lenguaje->H->HTML
• Copia de seguridad / autocompletar: Configuración->Preferencias-> Copia... ->Marco, Copia Simple (en otra carpeta), Habilitar autocompletar en cada entrada-> completar función y Pistas para los parámetros de la función.
• Copiar/restaurar los archivos del Utilísimo NppFTP, los cuales suelen perderse con demasiada facilidad.
  Es un fichero XML como el filezilla (no estaría mal tener un Plugin importador de filezilla para el NotepadFTP, me daría la vida) y con copiarlo para tenerlo seguro y sobreescribirlo cuando lo perdemos (algo que sucede demasiado a menudo) estaremos a salvo. ¿donde está?
  Portable: App\Notepad++\plugins\Config\NppFTP\NppFTP.xml
  Normal: C:\Usuarios\[usuario]\AppData\Roaming\Notepad++\plugins\config\NppFTP\NppFTP.xml 
• Atajos de teclado: Los pongo a mi gusto en Configuración->Gestor de atajos de teclado. 
• Configurar extensiones: Por ejemplo yo trabajo mucho con Smarty y sus plantillas HTML son ".tpl" y no reconoce el HTML. Así que me voy a Configuración->Configuración de Estilo...->HTML (columna de la izquierda)->Ext. Usuario->añado tpl. Si ahí mismo cambias arriba el tema verás diferentes aspectos del notepad++, lo acabo de poner en Bespin.
• Otros plugins:
  XML tools: Haz legibles a los xml.
  Lorem ipsum: Mete texto de ejemplo  sin salir del Npp.
  Multiclipboard: varios portapapeles almacenados pulsando ctrl+mayus+v los ves y puedes elegir.

En un futuro daremos algunas claves de productividad para Npp.

Greasemonkey, tuneando las webs a tu gusto

Imagina que quieres ver facebook con un diseño que a ti te gusta, quitar los anuncios, o una columna. O imagina que no quieres publicidad en grooveshark, o que quieres un formato distinto de tu bienamado Google reader. Pues eso te permite la extensión para chrome (Tampermonkey) y firefox Greasemonkey.


Su forma de funcionar e bien sencilla, te permite añadir javascript a lo que tu quieras, y hay una gran comunidad que ha hecho un montón de estos scripts, por lo que no tienes que tener ni idea, vas a esta página  y buscáis la web para la que queréis "mejorar" la experiencia, instalas el script y recargas la web en cuestión.

Si además pilotáis en javascript pues mejor, yo he hecho mi propia versión del google reader.

Tenéis varios top 10 en internet, pero eso a gusto del consumidor.

Cierra Gmail en otros ordenadores

A veces entras en tu curro a Gmail y cuando llegas a casa te acuerdas que no has cerrado dicha sesión. Es decir, que alguien puede ver/borrar tus email o chat, claves, etc.


Pues google te permite cerrar tu cuenta en otros ordenadores a distancia ¿donde? Abajo del todo de tu gmail, donde pone "información detallada"

"Le das a cerrar todas las demás sesiones" en los otros ordenadores se cerrará esa cuenta.

buscando ideas de diseño web

 

Siempre hay que tener bien nutrida la galería de ideas para cualquier proyecto. No soy muy partidario de los libros con fotos de webs, me parecen una contradicción, quieres ver diseño web, que mejor que la propia Red para ver la interacción o echar un vistazo a cómo han solucionado problemas de CSS.

Esta claro que Internet es infinita y no se puede empezar por cualquier parte, así que os recomiendo patterntap.com, una estupenda galería con categorías por elementos.

Otra buena opción es pasarse por Awwwards y ver lo mejor que se está haciendo en diseño y desarrollo web. Puestos a buscar ideas veamos a los mejores no?

modernizr y polyfills, usa html5 sin miedo a los viejos navegadores

Ayer vimos lo bueno que era html5 boilerplate(H5B, para abreviar), que nos permitía crear una página consistente entre navegadores, y ¿sabéis cual es una de las herrmientas que incluye H5B? modernizr.

¿Que es modernizr? es una librería javascript que detecta las capacidades del navegador que estas usando y poder tomar medidas al respecto.

Por ejemplo, hace poco hice una página que incluía vídeo en html5 en formato h264 (si, pasando a lado oscuro de la fuerza). Y aunque es muy bonito eso de poner:

<video controls="controls" src="video.mp4" type="video/mp4" ></video>

Cuando llega la hora de la verdad esto no funciona en firefox, (por ahora no soporta el codec h264 como dijimos en nuestro post más famoso hasta la fecha), tampoco funciona en Internet Explorer por debajo del 9.

Lo ideal sería que cuando esto no funciona, se active un javascript que convierta ese video html5 en un flash y así IE8, Firefox u Opera no tendrán problemas. A este script que "degrada" el HTML5 a otras tecnologías soportadas por tu navegador (flash, javascript, etc...) se les llama polyfills.
Aquí tenéis una lista de los más útiles/usados .

El que vamos a usar en nuestro ejemplo es html5media.js, que permite convertir la etiqueta audio o video en flash gracias a flow player.
¿que queremos? que cuando el navegador no soporte el codec h264 salte un flash para la etiqueta video.
Pues si tenemos ya modernizr cargado es tan sencillo como esto.

 <script>
if (!Modernizr.video.h264){
Modernizr.load("http://api.html5media.info/1.1.5/html5media.min.js")};
</script>

Traducido es "si modernizr detecta que el navegador no soporta la etiqueta video con el codec h264 entoces modernizr cargará el javascript html5media.min.js".
Si quitásemos el ".h264" sólo funcionaría en Internet Explorer antiguos, ya que Firefox u Opera  soportan vídeo pero no h264.

Esto se puede hacer para casi cualquier cosa por ejemplo, para añadir placeholder en los formularios (necesita jquery).

 <script>
if(!Modernizr.input.placeholder){
    Modernizr.load("https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js")
};
</script>

Si ya queremos rizar el rizo y tenemos 20 cosas como esta lo mejor es hacerlo de una tacada tal que así


 <script>
Modernizr.load(
  {
  test:  Modernizr.video.h264 ,
  nope: 'http://api.html5media.info/1.1.5/html5media.min.js'
  },

  {
  test:   Modernizr.input.placeholder ,
  nope: ' https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js '
  }
);
</script>


Se puede poner además de "nope:" un "yep:" para poner que haga algo si tiene esa característica (por ejemplo un css para maquetar los vídeos, etc...)

Esto os quitará a los desarrolladores web un montón de trabajo y espero que os sea de tanta utilidad como lo ha sido para mi

html5 boilerplate, webs bien hechas desde la base

HTML5 esta muy bien, pero ¿podemos hacer hoy día páginas con esta tecnología sin que peten en IE8 por ejemplo?

La respuesta es si, pero era un coñazo detectar y aplicar los hacks necesarios para que estos navegadores se degraden a html4. Degradarse es que un navegador antiguo cargue unos trucos (hacks) javascript y css para lo que hay de nuevo en html5.

Para eso se crea HTML5 boilerplate, una base html5 con todos los hacks que harán que lo que pongas dentro se vea muy parecido en todos los navegadores, incluidos los antiguos. 

Y esto hijo, es un verdadero relax del que podéis disfrutar los jóvenes de hoy.

jsbin.com, haciendo webs online

Los que hacemos páginas webs, html y javascript, muchas veces queremos ver si algo funciona como es debido.

Y aunque el notepad++ es una maravilla, muchas veces no estás en tu casa como para ponerte a instalarlo.

Para esos momentos, y para hacer tus primeros pinitos descubrí hace poco jsbin.com, un sitio que te permite probar/guardar tus cosas javascript, css  y html online.

Viene con marcado de colores javascript, css y html, salvar plantillas y además te permite incluir jquery con un simple click.

Herramienta para tener siempre a mano, aquí os dejo un vídeo sobre cómo hacer plantillas de los muchos que tenéis en su web.

Vídeo HTML5. La guerra ha terminado y han ganado los malos

Hace tiempo escribí sobre el formato abierto de vídeo webM contra el formato propietario h264. Predije que si las cosas salían como esperaba, el bien triunfaría sobre el mal, me equivoqué completamente.

Historia.

Se quiere que los vídeos sean tan fácil de poner como una imagen en las páginas web. La fundación MPEG-LA (apple, microsoft,Todo buena gente...) posee un buen codec llamado h264 (aka mp4), es propietario y hay que pagar por que tu programa o dispositivo lo reproduzca. Por ende, tu programa o aparato será más caro que uno que no lo lleve. Otro problema es que, como buenos camellos, la MPEG-LA está prácticamente regalando licencias para que todo el mundo disfrute de esto, ahora bien, si es un standard ellos pueden cobrar lo que les de la gana, te regalan el coche y tranquilo que ellos controlarán el precio de la gasolina.

Alternativamente hay otro codec abierto llamado Theora (aka OGG/OGV)  un poco peor que el h264 pero completamente abierto. "Peor" significa que necesita más espacio y mejor conexión a internet para que se vea a la misma calidad. Y "abierto" significa que puedes crear reproductores, editores, grabadores sin pagar un centavo y que no te van a subir el precio mañana.

La W3C, algo parecido a la ONU en internet (los países son Apple, mozilla, Microsoft, opera ), tendría que  recomendar un codec u otro, pero lo que dice es básicamente "que Dios reparta suerte" y que cada uno ponga lo que le de la gana.

Mozilla (firefox, el navegador más popular en ese momento) y Opera se quejan de que para usar h264 tienen que pagar un pastizal y que gastar dinero que no gastarán en desarrollo de sus navegadores, por lo que no podrán ser competitivos.

La solución por la que se optó es la ley del más fuerte. Podías comprimir dos veces el archivo de video, h264 y OGV para que los diferentes navegadores lo reprodujesen. Si tu navegador no lo soportaba, siempre podías ponerlo en flash.

El punto importante es que Adobe Flash soporta h264 (mp4), es decir, ponías tu vídeo en h264 y si tu navegador no soportaba este formato saltaba un flash que lo reproducía. Flash no ha soportado nunca OGG. Por lo que si tenías que comprimir en 1 sólo formato (los vídeos ocupan muchos y tienes que elegir) siempre se optaba por h264.

Y en el papel de Judas... Google

¡No os preocupéis Mozilla! debieron decirles los de Google, somo un gigante bueno y vamos a comprar una empresa (On2) que tiene mucha experiencia y un codec cojonudo el VP8. Nosotros tenemos mucho peso en internet y se van a enterar estos de los codecs propietarios.

Casi nadie sospechaba la traición de Google porque a ellos también le convenía que el codec fuera libre, pensad en los vídeos de youtube, vienen comprimidos en h264, les cuesta muy poco, pero poned un céntimo por vídeo y veréis que Google se ahorraría una pasta si usara un codec abierto, y para hacerlo la gente tiene que poder verlo en sus casas sin problema. Un vídeo no visto es dinero en publicidad perdida.

Pues ni corto ni perezoso Google compra On2 por 127 millones de dólares, mejora su codec VP8 y lo libera intentando crear un nuevo estandard el webM (vídeo en vp8 y audio en vorbis, mejor que el mp3).

Y llegaron al poco y dijeron, webM para todo el mundo, gratis, gratis... Mozilla y Opera sacaron nuevas versiones de sus navegadores y dijeron que soportaban el nuevo standard webM contentos de no pagar por los codecs propietarios.

Adobe cerró el timo prometiendo que sus siguientes versiones de Flash soportarían WEBm. 

El estatus en ese momento era, Navegadores con h264:

• Chrome
• Safari en Macos
• IE9
• iPhone
• Android

Con webM:

• Chrome
• Firefox
• Opera

¿Os dáis cuenta del truco? ¿no? Os pongo un ejemplo

Haces una página web y pones un vídeo, lo comprimes en h264 así lo pueden ver sin problemas en móviles,  y navegadores, y si da la casualidad de que usas Firefox pues salta un reproductor con Flash, cosa algo cutre. Chrome lo soporta todo, ¿Por qué usar firefox?.  Chrome empieza a llevarse usuarios de Firefox.

Los de Apple (en general el consorcio maligno MPEG-LA) empiezan a decir que el codec es peor que el suyo, que los van a denunciar por violación de patentes lo que añade mucho ruido a la ecuación, lo cual les conviene.

La pregunta del millón es ¿porque no incorporan el codec en Safari o en iphone si es gratis? porque Apple se lleva pasta cada vez que alguien usa el codec h264.

Google anuncia que dejará de soportar h264 en chrome para promocionar la web abierta. Para jugar a la misma altura que Firefox. Esto es otra engañifa. Si realmente confiaban en el webM y querían standarizar el codec lo que tendrían que haber hecho google es pasar youtube a webm, y quien lo quiera reproducir que use el youtube player de iOs o un navegador que lo soporte. Ya verías tu que rápido incorporaban el codec a sus navegadores y dispositivos Apple y compañia.

Pero durante la transición iban a perder visionados de vídeos y publicidad (más que 127 millones, supongo) así que "va a ser que no".

Y empieza a pasar el tiempo, y Chrome vuelve a incluir h264 (a través de flash incorporado en el navegador), y las guerras de los dispositivos móviles se hace encarnizada. Los chips de los móviles están optimizados para h264 y no para webM, por lo que aunque el navegador soporte webm, gastará más batería e irá peor.

Adobe (flash) se ha ido silbando por la puerta de atrás y diciendo "ya si eso lo vemos, iros olvidando de más versiones para móviles".

Y han pasado un par de años y Mozilla quiere con "boot to gecko" crear su sistema operativo para móviles, y la realidad es que ninguno tiene aceleración para webm y todos tienen para h264.

Así que Firefox ha bajado la cabeza y ha dicho, "lo de la web abierta es muy bonito pero se nos está comiendo la competencia (aka Chrome), renovarse o morir".

Hay gente que culpa a Mozilla, yo los veo como la vícitma. h264 ha ganado, esta presente en los móviles, las cámaras de fotos, las consolas, etc ¿tiene sentido resistir hasta la muerte y reunirse con netscape al otro lado?

Al menos la guerra ha terminado y podremos hacer nuestras páginas igual para todos los navegadores.

Generando PDF en lugar de HTML con PHP

A mi el PDF siempre me ha parecido un formato bastante coñazo ¿quien no no ha hecho click en un resultado de búsqueda de Google y ha gritado "NOOooooo" cuando se ha dado cuenta que estaba descargando un PDF de 25 Mb?

Este post es para desarrolladores PHP, no para que pases de página web a pdf, para eso ya tienes en chrome la opción de "guardar como pdf" al darle a "imprimir".

En fin, pero al igual que en la guerra, la informática hace extraños amigos de cama y hace poco he tenido que generar PDFs para imprimir y he tenido que investigar un poco.
¿Por qué pdf y no html?
descargar_mi_pdf

1. Se ve igual en todos los visores/naegadores e impresiones
2. Incluye dentro las imágenes y soporta enlaces y otras cosas

No, no es porque no se pueda copiar y pegar o editar, todo es susceptible de esto.

A lo que voy, resulta que puedes convertir un html a PDF con PHP fácilmente (siempre que tengas unas nociones básicas de PHP) con DOMpdf.

Lo descargáis, y lo incluís en vuestro script php y hacéis algo parecido a esto:

require_once("includes/dompdf/dompdf_config.inc.php");

$html = file_get_contents("archivo_pdf.html");

$dompdf = new DOMPDF();

$dompdf->load_html($html);

$dompdf->set_paper('a4', 'portrait');

$dompdf->render();

$dompdf->stream("descargar_mi_pdf.pdf", array("Attachment" => false));

Lo que hacemos es, importamos la librería pdf, luego cargamos el contenido del html (que puede y debe incluir el css), luego creamos un nuevo objeto dompdf, le decimos al objeto que cargue el html, ponemos el tamaño del papel y la orientación, luego que lo dibuje y finalmente que lo mande a pantlla con el nomre de archivo  "descargar_mi_pdf.pdf".

Yo uso smarty (del que ya hablaré en un futuro) para separar la lógica del aspecto. Pero me ha sorprendido lo fácil que es DOMpdf. Espero que os sirva.

SVG para tus páginas webs, pasa de los gradientes css

En nomaspatanes algunos somos desarrolladores web y en la medida que podamos daros consejillos que os faciliten la vida pues mejor que mejor.

Muchos de vosotros haréis vuestros pinitos en páginas web, algunos no pasarán de poner la letra en "comic sans" pero los que seáis un poco más avanzados sabréis que el CSS3 permite muchas cosas que hacía tiempo que hacían falta.

A consecuencia de este artículo me he decidido a daros un consejillo al respecto

Imagina que quieres poner un degradado en un fondo, en CSS paa que vaya en los diferentes navegadores (que soporten el gradiente) sería una cosa así:



.fondo-degradado {
background: -moz-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,0))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* IE10+ */
background: radial-gradient(center, ellipse cover,  rgba(30,87,153,1) 0%,rgba(125,185,232,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#007db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

Es un tochaco ¿no? Y esto no servirá para muchos navegadores que no soportan el gradiente (por ejemplo el circular)
Sin embargo, está el SVG ¿Que es el SVG? es un formato de imagen vectorial abierto. Sus principales cosas buenas son:

1. Si lo agrandas o reduces no pierden calidad. Lo que lo hace perfecto para móviles
2. Puedes crearlos con un blog de notas, con inkscape, illustrator, freehand o lo que más te guste, incluso hay herramientas web gratuitas.
3. Ocupan muy muy poco, porque son para dibujos sencillos (logotipos, gráficas,etc...) no para fotografías. 
4. Lo soportan más navegadores que los gradientes radiales, por ejemplo y no hay que escribir 20 veces el código tipo: -webkit-radial-gradient, -moz-radial-gradient, o-radial-gradient...
5. Soportan animaciones por lo que en muchos casos son ideales para ponerlos de fondo de algo.
6. Te permite separar el css de las imágenes quitando mucho código de la hoja de estilos.

animación en SVG

El código cómo el de arriba sería

.fondo-degradado {

background:url(gradiente.svg);

}

fichero gradiente.svg

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">

 <title>gradiente</title>

 <defs>

  <radialGradient r="0.5" cy="0.5" cx="0.5" id="svg_1">

   <stop stop-opacity="0.8" stop-color="#373737" offset="0.3"/>

   <stop stop-color="#000000" offset="1"/>

  </radialGradient>

 </defs>

 <g>

  <title>Capa 1</title>

  <rect id="svg_1" width="640" height="480"  y="0" x="0" stroke-width="4" stroke="#000000" fill="url(#svg_1)"/>

 </g>

</svg>

Es más claro, es más fácil (lo puedes hacer con un programa de diseño vectorial) y te ahorras aprender el lenguaje de cada navegador.