Como un primer paso para la creacion de un plugin que pueda crear Sprites Css con las etiquetas <img> de html, si no que ademas las presentes en los estilos CSS y que sean suceptibles de ser spritificadas me he pasado estas ultimas semanas intalando y probando un servidor web.
Este esta instalado en Ubuntu , con un servidor nginx, php5-fpm, sql y varnish. Ha sio complejo levantarlo y que funcione todo junto a wordpress multisite y Cloudflare.
El principal problema de esa instalacion es que a traves Cloudflare no se puede acceder a la pagina de login y administracion de manera segura (por medio de HTTPS), asi que tuve que improvisar. Ahora que todo funciona puedo aseverar que no es necesario pagar un hosting para paginas que no tengan mas de 1000 paginas vistas por visitas organicas (los crawler de los buscadores no cuentan ya que apensa suponen carga real en este servidor).
Haciendo pruebas de estress descubri que se pueden llegar a servir con exito 2800 paginas de 250 clientes unicos simultaneos en menos de 10 min. Y el limite lo marcaba el ancho de banda de subida ya que el servidor no se despeina con esa carga.
Pero eso es tema de para otro post, aqui me gustaria comentar el ultimo desarrollo.
Script para obtener el contenido real de una pagina web.
Como he comentado anteriormente, el primer paso para poder localizar las imagenes a sprificar es poder interpretar la pagina a nivel de javascript (a nivel de cliente, lo que se ve en el navegador) y no a nivel de php(lo que entiende el servidor).
Los servidores tienen una manera muy limitada de leer paginas webs, la mas avanzada puede ser a traves de los objetos DOM. Aun asi esta forma tiene muchas limitaciones y es que, por ejemplo no carga los estilos asociados a los nodos. Eso descarta la posibilidad de poder usar DOM para detectar las imagenes embebidas en el CSS.
Por otro lado, de manera directa es imposible ver una pagina como se ve en el navegador de forma interna en un servidor. A no ser que se instale y configure alguna de las extensiones que hay para ello.
Phantomjs.
Despues de revisar las opciones disponible me decliné por Phantomjs. Es la mas “sencilla” de usar y la que mejor posibilidades me ofrece.
Scrapper el scrapeador.
Asi que una vez instalada y configurada, me puse manos a la obra. El scrapper tiene cierta inteligencia y solo se queda con el contenido “real”. Esto es, el post en si, no los anuncios ni los comentarios. Es lo sufiente inteligente y flexible para poder trabajar con cualquier pagina de las que he tratado hasta ahora.
Ejemplos de lo que puede pasar sin interpretar la pagina como un navegador
Mashable, que son muy cucos ellos, utilizan una forma de proteger el contenido de la pagina. La encriptacion mediante ofuscacion de codigo.
Este metodo es perfecto y el mas avanzado que existe, sin que afecte al usuario final pero haciendo muy complicado a cualquier servidor cargar y tratar esa pagina mediante PHP. La transformacion del contenido se hace en el navegador directamente siendo imposible de obtener el contenido desde una rutina en el servidor.
Si esta pagina se cargara mediante CURL y mostrada en quitando las etiquetas <script> (para asegurarnos que no traduce el contenido) mostraria lo siguiente:
Mola eh?. A ver como sacamos de ahi la informacion respecto al contenido… Todavia no domino bien el Klingon asi que lo dejamos mejor para otro momento.
Pero por otro lado si cargamos la misma pagina con el script (mas bien son una serie de scripts en diferentes tecnologias) que he desarrollado obtenemos lo siguiente:
Including your favorite gadget in a tattoo may be an obvious choice. But what about vintage tech that no one uses anymore? Or tech that’s hot now but may not be in five or 10 years?
In the tattoo photos below, you’ll find everything from floppy disks to Polaroids to cassette tapes. Queue nostalgia…
SEE ALSO: 10 Great Geeky Tattoos
Here are some of our favorite tattoos of old technology. Call them old or outdated, but we prefer to think of these gadgets as classic vintage.
1. GameBoy Color
Image courtesy of FYeahTattoos
2. Cassette Tape
Image courtesy of FYeahTattoos
3. Gramophone
Image courtesy of FYeahTattoos
4. Polaroid
Image courtesy of FYeahTattoos
5. Piano-Typewriter
Image courtesy of FYeahTattoos
6. Floppy Disk
Image courtesy of FYeahTattoos
7. Vinyl Record
Image courtesy of FYeahTattoos
8. TV Box
Image courtesy of FYeahTattoos
9. Typewriter
Image courtesy of FYeahTattoos
10. Compass
Image courtesy of FYeahTattoos
11. Polaroid Camera
Image courtesy of FYeahTattoos
12. Microphone
Image courtesy of FYeahTattoos
13. Minolta Film Camera
Image courtesy of FYeahTattoos
14. Projector Screen
Image courtesy of FYeahTattoos
15. Tin Can Telephone
Image courtesy of FYeahTattoos
All images courtesy of FYeahTattoos
Y esto ya es otra cosa. Y como he comentado anteriormente el script dispone de la suficiente “inteligencia” como para detectar donde esta el contenido real de la pagina y devolver solo lo realmente importante.
Image courtesy of FYeahTattoos
