35 ebooks gratis sobre diseño y desarrollo web

Cada vez hay que tener en cuenta más disciplinas a la hora de desarrollar una web (lenguajes, frameworks, css3, html5, responsible design, desarrollo móvil…), pero también disponemos de mucho más material gratuito para aprender y poder avanzar en cualquier disciplina por nuestra cuenta.

En tripwiremagazine han recopilado 35 ebooks gratis sobre diseño y desarrollo web  y que abarcan desde  creatividad, uso de tipografías hasta el gestión con CMS:

35 Useful and Free E-books for Web Designers

Otra web imprescindible es OpenLibra, sección de ebooks libres de EtnasSoft en la que también van recopilando todo el material libre sobre desarrollo y programación web: OpenLibra de EtnasSoft

Guía de diseño para Android y otros recursos sobre desarrollo

En la página oficial de Android han publicado una guía de diseño de aplicaciones para Android muy completa: Android Design

• Principios de diseño para Android
• Diseño UI
• Patrones de diseño
• Tipografía (pobre comparándola con el ipad o iphone)
• Barras de navegación
• Diseño de iconos
• Resoluciones
• Tamaños mínimos a la hora de diseñar botones
• Tabs
• Listados
• Scrolls

Así como enlaces a la documentación del SDK, tutoriales, etc… Buen punto de partida a la hora de diseñar y crear aplicaciones para Android.

Cómo usamos nuestras tablets

Sencilla infografía sobre el uso que le damos a las tablets, número de usuarios, etc… How we use our tablets (Infographic)

Cómo testear aplicaciones para móviles sin arruinarte :)

Tanto si desarrollas webapps como aplicaciones nativas para móviles, necesitas testearlas en el mayor número de dispositivos. En este post, Brad Frost reune conesejos y recursos para no perdernos entre tantos dispositivos: Test on Real Mobile Devices without Breaking the Bank

De postre, Resources to Hack Design

Post de Jamie Davidson (jamie-davidson.com) con muchos recursos sobre diseño web, css3, layouts, patrones de diseño, tipografía en el diseño web, iconos y bancos de imágenes, galerías, tutoriales: Resources to Hack Design

Con esto creo que tenéis para ir tirando el fin de semana :)

Infografía: Las propiedades CSS3 más interesantes

Infografía con las propiedades CSS3 más importantes.
Aunque no las soportan los navegadores antiguos, los navegadores de smarphones las suelen soportar sin problemas ya que hay más rotación de dispositivos y no tiene que soportar los caprichos de Internet Explorer.

Utilizando estas propiedades te puedes ahorrar photoshop para casi todos los efectos visutales “2.0″ ya que el propio navegador ya los soporta: bordes redondeados, opacidad, sombras, degradados, etc… con las ventajas de carga en los dispositivos móviles y en agilidad de el desarrollo:

Visto en Oneextrapixel: Quick look into css3 propierties

PressWork. Framework HTML5 para WordPress con funciones wysiwyg

Pressswork es framework html5 para wordpress que nos va facilitar la modificación de themes de forma visual desde el mismo entorno de edición.

Me parece una opción más intersante a la hora de crear themes que soluciones como Artisteer, que primera vista te facilitan el trabajo (si no sabes nada de wordpress), pero con las que no aprendes nada sobre la creación o modificación de themes para wordpress.

Normalmente prefiero hacer las cosas a mano, pero si cumple todo lo que promete, algún diseño sencillo se puede montar con su editor wysiwyg:

http://presswork.me/feature-video/

Enlace: PressWork

WebApp movil para las Hogueras de San Juan de Alicante

Hace unos meses publiqué un pequeño post sobre la webapp para fallas que desarrollamos para el Portal de Turismo de la Comunitat Valenciana. Ahora le toca el turno a su proyecto gemelo: la Guía Móvil para las Hogueras de Alicante (hogueras.comunitatvalenciana.com)

Para las Fallas de valencia estaba previsto una versión de la guía adaptada para Facebook que al final, por tiempos, tuvimos que recortar en el proyecto final. Aprovechando que ya teníamos mucho trabajo hecho para las fallas, hemos podido meter una pequeña aplicación para facebook de la guía.

Como las dos guías (la de hogueras y la de fallas) comparten muchas características, esto es lo que publiqué en el anterior post:

¿que información le resultará útil a alguien en la calle, en las Hogueras de Alicante y con un smartphone en la mano?

• Información sobre las Hogueras de Alicante (información general, consejos, etc…).
• Listar las Hogueras con su localización usando mapas (Google Maps en este caso).
• Agenda de eventos geolocalizada.
• Poder verse de forma optimizada desde un iPhone/Android/Smartphone.

La información debía ser útil tanto a turistas como a la gente de Alicante. Un detalle importante a tener cuenta es que las fotos no iba a estar disponibles hasta “La Plantà”

Y la parte técnica:

Con los elementos sobre la mesa (requisitos técnicos, elementos a incluir, interfaz, etc..) podemos tomar decisiones sobre las herramientas y tecnología a utilizar:

• WordPress como CMS por la agilidad a la hora de gestionar contenidos y el amplio ecosistema de utilidades y plugins para el uso con móviles.
• jQuery Mobile como framework javascript para la adaptación del interfaz para móviles.
• Google maps para la geolocalización de las hogueras y eventos.

Usar WordPress nos da  acceso a una inmensa cantidad de plugins con los que poder dar salida a cada necesidad de la webapp. De todos lo que utilizamos, estos son los más importantes:

• Mobile pack o WPtap Mobile Detector. para asignar el theme movil cuando se acceda desde móvil
• GeoMashup. Para la implementación de Google Maps a las fichas
• Magic Fields. Para la personalización de campos en las fichas de las hogueras y agenda
• qTranslate. Para gestionar los idiomas (castellano e inglés) qTranslate no me gusta usarlo en proyectos en el que importe el seo, pero en este proyecto era algo secundario.
• Theme Test Drive. Para mostrar de forma pública un theme y en el simulador una versión móvil adaptada para escritorio o facebook.

Con todo esto tenemos la versión optimizada para móviles, pero ¿y la versión de Facebook?.
Para crear la app que actualmente está funcionando como pestaña en la web de la Comunitat Valenciana, los pasos serían los siguientes:

• Crear una app nueva en Facebook
• Diseñar un theme nuevo para WordPress ya que va funcionar con la misma configuración a nivel permalinks, nombre de las páginas, etc…
• Usar el selector de theme “theme test drive” para utilizar uno u otro en base al diseño a mostrar: facebook, escritorio, movil, etc…
• Optimizar el diseño para que los contenidos se muestren correctamente en un ancho de 520px y siguiendo las pautas de diseño para pestañas en Facebook

App en Facebook funcionando en la pestaña de la Comunitat Valenciana

Ejemplo de ficha de Hoguera en Facebook

En otro post explicaré más a fondo los pasos para crear la app y usar los contenidos de WordPress.

Las fotos de que hay publicadas son las del día de la plantà y muchas de ellas no estaban terminadas o se ven gruas y camiones. En la versión que hicimos para las fallas sólo se mostraba una foto pero para la versión de hogueras tuvimos que hacer cambios para mostrar más fotos por ficha.

Podéis ver las fotos de las hogueras de categoría especial que hemos hecho para la web app de hogueras en mi cuenta de flickr. Las hice en 3 horas contrareloj para que tenerlas disponibles al día siguiente de la plantà.

Set en Flickr de las fotos para la web app

Set en Flickr Hogueras Alicante 2011

Podéis acceder a la web y los distintos enlaces (QR, página en Facebook, etc..) en el subdominio hogueras.comunitatvalenciana.com