Cuaderno de campo para móviles
domingo, 27 de enero de 2013En realidad el blog está preparado para dispositivos móviles (tabletas, teléfonos) desde hace ya tiempo, pero solo en teoría. Instalé el plugin WordPress Mobile Edition que aplica un tema (skin) diferente al blog cuando se detecta que el visitante está usando algún dispositivo mobil para acceder al blog y que adapta los contenidos a una resolución y a una descarga de datos más pequeña. El problema es que teniendo el blog tan hackeado a todos los niveles el aspecto era descuidado ya que se aplicaban estilos y funciones que fuera de la «piel standard» no funcionan.
Lo voy solucionando. He incluido un par de funciones que buscan imágenes en los apuntes y dependiendo de donde procenden (flickr/google por ahora) las reemplaza por su versión de resolución baja.
La url para Flickr sigue más o menos este esquema (más o menos porque ha cambiado en los últimos años por lo que fotos antiguos tendrán otro patron)
http://farm1.staticflickr.com/93/245363225_5d9407692f_m.jpg
En la url de Flickr la última m define el tamaño de la imagen, las opciones son (de menor a mayor) si no recuerdo mal: s,t,m,b,z,o.
La siguiente expresión regular me permite reemplazar las imágenes publicadas en el blog y reemplaza su link a la galería por un enlace a una imágenen mediana:
(<a[^>]*>)?(<img[^>]*)(http:\/\/farm[0-9]\.static\.?flickr\.com\/[0-9]*\/)([0-9]*_)([0-9a-zA-Z]*)(_[a-z])?\.(jpg|png)([^>]*\/?>)(<\/a>)
Idem para las imágenes alojadas en los servicios de Google/Picassa/Blogspot, el patrón vendría a ser algo como:
http://lh5.ggpht.com/-Fz2PXa4b4Nw/UQUiEKXzS2I/AAAAAAAABwc/PLzoRW-AX_Y/s220/imagen.png
Donde el tamaño viene dado por la s220. Este parámetro puede tomar casi cualquier valor (menor de 1600), puede tomar h220 para definir altura en lugar de anchura, puede tomar d para formar la descargar ó s220-c para forzar una imagen cuadrada, o para descargar original (si el autor lo permite). Hay varias opciones más.
La expresión regular para parsear es todavía más divertida por la url tambien cambia de vez en cuando (y lo seguirá haciendo por lo que habrá que ir corriendola)
(<a[^>]*>)?(<img[^>]*)(((https?:\/\/[lhbp\.0-9]*\.(ggpht|blogspot|googleusercontent)\.com\/)([0-9a-zA-Z_\-]*\/){4})(s[0-9]{2,3}\-?c?\/)?([0-9a-zA-Z\._\-]*\.)(jpg|png))([^>]*\/?>)(<\/a>)?
Youtube ha dado un poco más el tostón porque aunque se supone según la documentación que basta insertar un vídeo mediante un iframe para asegurar que el servidor devuelve contenido Flash/HTML5 según el cliente, en la práctica (al menos en mi Android) esto no era así y siempre devolvía contenido Flash. Al final lo arreglé incluyendo ?html5=1 en la url para forzar inclusión de vídeos en lugar de Adobe Flash. Queda algo así la url:
<iframe class="youtube-player" type="text/html" width="310" height="160" style="max-width:100%;" src="https://www.youtube.com/embed/xxxxxxxxx?html5=1&wmode=opaque&controls=0&showinfo=0&showsearch=0&modestbranding=1" frameborder="0"></iframe>
Y la siguiente expresión regular que busca en el apunte tanto iframes, embed, object:
/(<object[^>]*>)?((<param[^>]*>){1,4})?(<(embed|iframe)[^>]*)(https?:\/\/(www\.)?(youtube.com)\/([a-z]*)\/([^\?\"\']*)([^\.,:\"\']*)?)([^>]*\/?>)(<\/(embed|iframe)>)?(<\/object[^>]*>)?/
En los próximos días iré preparando la galería de fotografías y vídeos.
Brookei
#1/ 27 de January/2013 a 20:11:52
Otros comentarios de «Brookei»
Interesante entrada.
Saludos via movil ;)
Trebol-a
#2/ 28 de January/2013 a 19:14:42
Otros comentarios de «Trebol-a»
Resaludos vía móvil!! :)
21 de November, 2024 @ 09:06