CSS Shapes Editor para Chrome 37

En abril 2014 salio un borrador de las CSS Shapes , y con ellos nuevas puertas de diseño web fueron abiertas para nosotros los Front-end. Ya no estamos limitados a solo formas rectangulares para nuestros elementos.

Si quieres saber de los que hablo mira los ejemplos en el siguiente link, pero necesitas tener Google Chrome en su ultima version para poder ver bien los ejemplos ya que no es soportado por todos los navegadores. Ahora mismo la version 37 de Chrome lo soporta.

Existe una herramienta de abode para saber si tu navegador soporta las CSS Shapes en este link.

Lo super interesante de estos ejemplos es como el texto se acomoda automáticamente a la forma creada, lo que nos da un diseño estilo de revista impresa muy bonito para nuestros diseños.

Para darnos mas idea de lo que podemos crear adobe tiene un interesante articulo donde tiene muchos ejemplos de ellos aqui.

Si quieres saber como crear estas increíbles formas puedes leer este tutorial basico muy bueno.  Ahora crear este tipo de formas puede ser un trabajo muy tedioso, no seria interesante tener un editor visual para ello?

Pues si que lo hay, un tipo llamado Razvan Caliman  hay puesto a nuestra disposición un editor para Google Chrome muy bueno, puedes ver su funcionamiento en este vídeo:

Para instalar esta extension necesitas Chrome 37, Por ahora le queda mucho para que las CSS Shapes sean soportadas totalmente, pero  es bueno saber que tenemos este tipo de herramientas a nuestra disposición. Solo nos queda ir jugando y probando para crear unos interesantes diseños en nuestras webs.

Tambien un editor para clip-path: http://bennettfeely.com/clippy/

 link : http://razvancaliman.com/writing/css-shapes-editor-chrome/
link: http://alistapart.com/article/css-shapes-101
link: http://blogs.adobe.com/webplatform/category/features/css-shapes/

Consejos para hacer tu web app super rapida...deja de hacer perder el tiempo a tus usuarios.

No es secreto que las redes moviles dejan mucho que desear, comparadas con la conexión de nuestro hogar. Y nada frustra mas a los usuarios de móviles que tiempos de espera de carga muy largooos, lo cual resulta en que piense que tu web app es una porquería por que les hace perder el tiempo.

El co-fundador de Instagram Mike Krieger dice : " ¿Quien quiere esperar mientras esta esperando? ".

Y eso es por lo general lo que la mayoría de las web apps hacer cuando están esperando confirmación de sus acciones. El proceso por lo general es el siguiente:

1. El usuario hace algo en la aplicación.
2. La aplicación envia una petición al server diciendo que algo paso.
3. El server recibe la petición y realiza la acción correspondiente.
4. La aplicación espera la respuesta del server y después actualiza la pantalla con el resultado.

Todos este proceso es mucho tiempo esperando, aunque sea el proceso normal de cualquier aplicación, y en redes móviles puede parecer una eternidad. La popular aplicación móvil Instagram usa unos trucos muy interesantes para generar la impresión de que la aplicación es super rápida , los cuales nosotros podemos emplear en las nuestras y tener a nuestros usuarios contentos.

A continuación les dejo una presentación donde Mike Krieger muestra las técnicas "secretas" que usan en Instragram para lograr esto. Muy recomendado que lo vean.




link: https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design
Comparte tus Bookmark : http://unitedbookmark.com/

Responsive images ya era hora !!

Con la llegada de HTML 5 , llego el responsive design como resultado nuestra aplicacion web puede adaptarse a la resolucion de cualquier dispositivo y entregar al usuario una agradable experiencia de navegacion.

Para manejar las imagenes en un diseño responsive usamos los nuevos poderes de CSS 3 y las media queries para seleccionar que imagenes deben cargar deacuerdo con la resolucion del dispositivo. Pero una vez escuche a un tipo decir que deberia de haber un servicio de responsive images osea en lugar de usar css o media queries , tu deberias de subir tu imagen full HD una sola vez y luego tu aplicacion hace la peticion  que necesita esa imagen y el servicio decuerdo a la resolucion del dispositivo te entrega tu imagen redimensionada con las dimensiones necesarias .

Esto te permite ahorrar velocidad de carga en tu aplicacion y siempre tener la imagen adecuada segun la resolucion que necesite tu visitante , bueno esa fue la historia que escuche hace como 5 meses atras y siempre me estuvo dando vueltas en la cabeza .

Hasta hoy por que he encontrado un plugin Jquery que cumple con este objetivo , dotar a tu aplicacion con responsive images , aunque segun la web por ahora usa PHP para hacer las redimensiones de tu imagenes , seguro que en futuro se extendera. Segun la web del plugin dicen que el script PHP crea la imagen que solicitada al vuelo solo la primera vez .

Les dejo el link del plugin para que hagan sus pruebas , en el futuro mas herramientas como estan en camino.

link : http://responsiveimg.com/ 

Libro para crear apps en windows 8

Recientemente Microsoft lanzo su nuevo sistema operativo windows 8 y con el Windows Store para las apps y para ayudar a los miles de programadores en el mundo a  crear Apps para el nuevo sistema operativo pone a nuestro alcance un libro de programacion de apps para windows 8 con html , javascript y css.

Si como lo lees completamente gratis !!! Microsoft quiere que windows store sea un exito total y para ello necesita apps y que mejor forma de hacerlo que entregandonos las herramientas necesarias a los programadores.

El libro fue escrito por Kraig Brockschmidt  y comprende temas como notificaciones , tareas en segundo plano , componentes , localizacion  , dispositivos , redes , y mucho mas ... no podria estar mas completo con 17 capitulos y un total de 800 paginas para tu lectura.

Puedes descargar el libro aqui : http://go.microsoft.com/FWLink/?Linkid=270056
y el contenido adicional del libro aqui : http://go.microsoft.com/FWLink/?Linkid=270057

A programar se ha dicho !!!

link : http://blogs.msdn.com/b/microsoft_press/archive/2012/10/29/free-ebook-programming-windows-8-apps-with-html-css-and-javascript.aspx

Guias de programacion y temas diversos web

En maestrosdelweb tienen  una galeria de excelentes de guias de programacion  y otros temas web de muy buena calidad , si alguna quisistes aprender sobre algun tema en especifico solo deberias de darte una vuelta por esta galeria , lo temas que se tratan son muy actuales.

Recientemente se ha incorporado la guia de Django el framework de Phyton , todas las guias estan accesibles al publico lo que unico que tienes que hacer regalar un click para compartir la guia en cualquier red social.

Solo para finalizar el diseño de la interaz es muy llamativo , es uno de los mejores que he visto

Link : http://www.maestrosdelweb.com/guias/

Tabla periodica en 3d en tu navegador

Increible este proyecto de una tabla periodica en 3D usando three.js , cada vez mas el 3d el lado del navegador me sorprende .

Si quieren aprender un poco mas de esta libreria 3d visiten http://learningthreejs.com/.

puede ver la tabla aqui : http://mrdoob.com/lab/javascript/threejs/css3d/periodictable/

Ejemplo menu css 3 3D

Miren que bonito este ejemplo de menu 3D en ccss 3 : http://soulwire.github.com/Makisu/