Introducción a flexbox

CSS3 logoFlexbox es un esquema de diseño CSS3 para que los elementos de una “caja” encajen de manera flexible ocupando toda la pantalla adaptándose a distintos tipos de dispositivos (caballo de batalla de hoy en día e el diseño web). Es un candidato a estándar en W3C así que habrá que seguirle la pista. Para empezar una buena guía es la que hay en css-tricks

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Aplicación Django para subida de ficheros

Buscando cosas para un proyecto he encontrado esta app/módulo para la carga de ficheros en una aplicación web usando las últimas técnicas de manera que la carga sea sencilla y visual.

http://blueimp.github.io/jQuery-File-Upload/index.html

Nos permite una carga archivos vía drag&drop, pre-visualizarlos, validar su carga y nos muestra una barra de progreso mientras sube. Y todo con un aspecto bootstrap muy agradable (o si lo queremos lquery ui).

El código está en github como no:

https://github.com/blueimp/jQuery-File-Upload

WebRTC: videoconferencia y más en HTML5

logo-webrtcHTML5 más que con un pan debajo del brazo trae una panadería completa! una de las cosas más golosas es las posibilidad de RTC  con WebRTC que trae las conexiones RTC, canales peertopeer para transmitir sin pasar por el servidor y getusermedia para capturar vídeo.

Hay varios proyectos por ahí que lo usan. Uno es https://talky.io/ que tiene liberado parte de sus componentes:

 

 

 

Solucionar probema usando googlemaps con Twitter Bootstrap

El framework de frontend Bootstrap es cada día más popular. Pero no todo son bondades y con Google Maps da un poco de gerra. Al poner un gmaps en nuestra web basada en bootstrap no vemos correctamente ni los controles del mapa ni los infowindows-s. Googleando es fácil dar con la solución. Está muy bien explicado en:

http://vuknikolic.wordpress.com/2012/04/02/twitter-bootstrap-and-google-maps-v3/

La solución pasa por añadir en nuestro css:

 


#gmap img {
max-width: none;
}

web2py en una sub url

Si queremos que web2py funciones en una dirección del tipo:

http://midominio.com/web2py/

Es necesario que creemos (o copiemos del ejemplo) el fichero routes.py con un contenido similar a:

 

routes_in=(('/web2py/(?P<a>.*)','/\g<a>'),)
routes_out=(('/(?P<a>.*)','/web2py/\g<a>'),) 

Patrones de diseño en JavaScript

lego

Los patrones de diseño son soluciones reusables a problemas de programación comunes. Nos permiten ahorrar tiempo y aprender más sobre un lenguaje. JavaScript cada día tiene más usos (ahora con las plataformas multidispositivo para aplicaciones móviles por ejemplo) y la comunidad se está poniendo las pilas:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Crear versión mobile de una web sobre DJANGO

Buscando como hacer una aplicación django apta para escritorio y móviles encontré bastante info, como por ejemplo:

Pero al final la que más me ha convencido la encontré a través de stackoverflow (como no!):

http://stackoverflow.com/questions/2321172/detect-mobile-browser-not-just-iphone-in-python-view

Se basa en el uso de un middleware, el minidetector. En su web hay una brevisima documentación, que además no es correcta 🙁 pero tampoco es tan difícil echarlo a andar:

  • Nos lo bajamos al directorio de nuestro proyecto:


svn co http://minidetector.googlecode.com/svn/trunk/minidetector

  • Lo añadimos a la lista de middlewares en el settyngs..py


'minidetector.Middleware'

  • Y ya podemos jugar en las vistas con el parámetro mobile del objecto request, por ejemplo cambiando los templates


def my_mobile_view(request):
if request.mobile:
#do something with mobile
}}}

Ya solo nos falta usar nuetsra framework web mobile preferido (como http://jquerymobile.com)

Probando PhoneGap

Hace unos meses hablaba de varias alterativas para el desarrollo de aplicaciones para móviles. PhoneGap es una plataforma para el desarrollo de aplicaciones para móviles con html, que nos permite desarrollar aplicaciones para varias plataformas (Android, IOs, blackberry, symbian,…) sin tener que aprender los sistemas de cada plataforma. El desarrollo lo hacemos en HTML5+Javascript,  si javascript no mola mucho, pero podemos usar la librería JQuery y JQueryMobile.

La verdad es que desarrollar algo sencillo es bastante fácil. He probado el ejemplo dan de como consumir datos de un API a través de JSON y me ha gustado bastante. No he probado la parte de acceso a BBDD en local y demás recursos del sistema móvil (GPS, acelerometros, etc) y solo he probado a compilar para Android. Pero la impresión es bastante buena. Eso sí, no sirve para cualquier tipo de aplicación. Pero si tenemos una web en versión mobile no nos costará mucho el hacer de ella una aplicación nativa, disponible en el market, etc.