2011-09-19

31 Sitio Web optimizado para ver en desde el celular y tomar como inspiración

31 sitio web optimizado para ver en desde el celular y tomar como idea para nuestro propios proyecto y seguir aprendiendo.



Travis Berry
mobile-website-travis-berry
Burger King
mobile-site-burger-king
Pixanimal Studio
mobile-site-pixanimal-studio
McDonald’s
mobile-site-mcdonalds
H&M
mobile-website-h-m
Roanoke College
mobile-site-roanoke-college
Marina Yachting
mobile-site-marina-yachting
Alex Buga
mobile-site-alex-buga
Marcel Muller
mobile-site-marcel-muller
Brian not Bryan
mobile-website-brian-not-bryan
Marks and Spencer
mobile-website-design-marks-and-spencer
Daily Wallpaper
mobile-website-design-daily-wallpaper
Aztek Web
mobile-website-aztek-web
Pottery Barn Kids
mobile-site-pottery-barn-kids
Nordstrom
mobile-website-design-nordstrom1
Procab Studio
mobile-website-design-procab-studio
UT Dallas
mobile-website-design-ut-dallas
MiCocinaLatina
mobile-site-mi-cocina-latina
Design My Website
mobile-website-design-design-my-website
Jemma Clements
mobile-website-design-jemma-clements
Marmalade on Toast
mobile-website-marmalade-on-toast
MailChimp
mobile-website-mailchimp1
Coosh
mobile-website-coosh-copy
Victoria’s Secret Pink
mobile-site-victorias-secret-pink
Downtown Pittsburgh
mobile-site-downtown-pittsburgh
Tanya Ryno
mobile-website-tanya-ryno
Mobile Furniture Template
Mobile Theme
Mobile Business Theme
Mobile Theme
Mobile Web Template

2011-09-18

Less y LessPHP son motores para generar CSS dinámico dentro de nuestros proyecto web

Una manera interesante y dinámica de crear archivos CSS tenemos 2 alternativas, la primera "less" esta enfocada hacerla del lado Cliente por el propio navegador y la segunda "lessPHP" hace los mismo pero con PHP del lado del server entregando un CSS que puede ser cachado también para futura llamadas.




Sitio Oficial: http://lesscss.org/



lessphp


Sitio Oficial + Demo: http://leafo.net/lessphp/

2011-09-17

Consumir un WebServer desde AndroId en solo 15 lineas de código Java

Consumir un WebServer que entrega un resultado en JSON desde Android cuando hacemos click en un botón.


Este código que se muestra en la imagen hace justo eso. 
Lo importante esta dentro del método 


btn.setOnClickListener(){ ... }


Código Completo:




En "http://192.168.3.70:3571/sample01.php" tenemos nuestro WebServer que entrega una salida JSON con la fecha del día, algo simple pero a modo de ejemplo es muy útil para ver como trabaja.


NOTA: Para esto requerimos permiso de acceso a Internet dentro de Android

También adjunto un video tutorial en castellano de como hacer lo mismo pero con ksoap2 for android.
En el video se muestra como interactuar con SOAP utilizaremos una librería llamada ksoap2 for android.
http://code.google.com/p/ksoap2-android/
De esta forma gran parte de la complejidad del desarrollo descansa en este componente.


2011-09-13

Cassandra: Una base de datos a la que están migrando empresas como Cisco, Facebook, Twitter, Digg, Reddit, Rackspace, Cloudkick, SimpleGeo, Ooyala, OpenX y mas..



Cassandra Apache es un software libre distribuido sistema de gestión de bases de datos . Se trata de un Apache Software Foundation proyecto de alto nivel [1] diseñado para manejar grandes cantidades de datos hacia fuera a través de muchos servidores básicos mientras que proporciona un servicio de alta disponibilidad sin puntos únicos de falla . Se trata de un NoSQL solución que fue desarrollada inicialmente por Facebook y potencia su función de búsqueda de la Bandeja de entrada hasta finales de 2010. [2] [3] Jeff Hammerbacher, quien dirigió el equipo de datos de Facebook a la vez, se ha descrito como una Casandra BigTable modelo de datos que se ejecutan en un Amazon Dynamo -como la infraestructura. [4]
Cassandra proporciona una estructura de clave y valor tienda con consistencia ajustable . [5] Claves del mapa a varios valores, que se agrupan en familias de la columna. Las familias de las columnas se fija en una base de datos Cassandra se crea, pero las columnas se pueden añadir a una familia en cualquier momento. Además, las columnas se agregan sólo a las teclas especificada, por lo que las llaves diferentes pueden tener diferentes números de columnas de cualquier familia.
Los valores de una familia de columna para cada tecla se almacenan juntos. Esto hace que Cassandra un sistema híbrido de gestión de datos entre un DBMS orientada a columnas y una tienda de la fila-orientada. [6] Por otra parte, además de usar la forma de modelos de BigTable, que tiene propiedades como la consistencia eventual , el protocolo de Gossip , un maestro-maestro forma de servir las peticiones de lectura y escritura que se inspiran en Dynamo de Amazon . [7]



HISTORIA:
Apache Cassandra was developed at Facebook to power their Inbox Search feature by Avinash Lakshman (one of the authors of Amazon's Dynamo) and Prashant Malik. It was released as an open source project on Google code in July 2008.[4] In March 2009, it became an Apache Incubator project.[8] On February 17, 2010 it graduated to a top-level project.[1]


Una de las tendencias actuales en bases de datos son las llamadas "bases de datos del tipo BigTable", un modelo de base de datos nada nuevo, pero sí hecho práctico y popularizado por Google, quien creó su propio sistema de almacenamiento y gestión de datos ya que de otra manera no hubiera podido escalar de manera práctica su masiva infraestructura para servir a los cientos de millones de personas que utilizan sus servicios a diario.




Sin embargo, aunque Google ha hecho público muchos de los detalles de su implementación, lo cierto es que por motivos de competitividad la empresa mantiene celosamente guardada su implementación actual optimizada.Pero, como siempre ocurre, un grupo de talentosos programadores se han unido junto con otras grandes empresas para crear algo sino similar, incluso quizás hasta mejor.Uno de los primeros frutos de estos esfuerzos fue la base de datos Hadoop HBase de la cual les hablé el año pasado, pero ahora verán la próxima generación...Hablamos de un proyectos bajo el nombre "Cassandra", mantenido por la Fundación Apache, y que quizás sea el sistema de bases datos diseñada para escalar "naturalmente" mas sofisticado del momento, y un tremendo punto a su favor es que gran parte de su fuente fue generado por los ingenieros del portal social Facebook, quienes han estado pasando toda su titánica infraestructura a este modelo, y como si fuera poco, la empresa Twitter recién hizo público que también planea migrar toda su infraestructura a esta nueva plataforma de datos. 


Además, empresas como CISCO y Rackspace también están entre las empresas que están apoyando el proyecto.Según los que mantienen a Cassandra, ya existen instalaciones con hasta 150 máquinas en paralelo y 100TB de datos en producción, por lo que aun en estado "beta", no hay duda de que este motor ha cobrado mucha tracción en el mercado, y es ahora mismo la alternativa primaria para toda empresa que necesite una base de datos que escale a millones de usuarios y en donde algo como Oracle, MySQL, Postgress o MS SQL Server no es suficiente (tanto desde el punto de vista de poder, como de costo y complejidad).


Pero, ¿qué hace a Cassandra algo tan atractivo? Pues para empezar, fue pensada para que escale "naturalmente" casi por sí sola con uno simplemente agregar mas máquinas a un cluster, prometiendo ser uno de los primeros sistemas de esta magnitud que escala "linealmente" acorde se le agreguen mas máquinas, y todo de una manera sencilla.Noten que existen soluciones que pueden escalar bastante bien en varios escenarios, como es utilizar MemCache con MySQL, pero el problema de esas soluciones es que requiere de mucha configuración manual para agregar nuevos nodos al cluster, y aparte de eso no garantiza una escalabilidad lineal como lo ofrece Cassandra.Otro punto a favor de Cassandra es que no es un sistema centralizado, ni gestionado de manera centralizada, sino que toda la inteligencia de gestionar los datos es manejada de manera distribuída entre todos los nodos, lo que en la práctica en realidad significa que no existe un solo punto de fallas en el sistema, ya que aun si se caen varios de los servidores, los otros continuarán operando ininterrumpidamente, lo que es esencial para muchos tipos de sistemas estilo web hoy día. Incluso, Cassandra soporta replicación no solo local en una red, sino que entre varios centros de datos remotos, todo de manera natural.Ahora, uno se preguntará, con estos datos tan distribuído entre centenares (o potencialmente centenares de miles) de máquinas, ¿como puede el sistema escalar en tiempo real sin generar un flujo masivo de tráfico en el proceso? Y la respuesta es que esa escalabilidad la puedes manejar tu a tu antojo, pudiendo especificar que todo el cluster implemente un modelo que va desde simples lecturas sin bloqueo, hasta bloquear hasta que todos los nodos hayan sido escritos.Sin embargo, para tomar ventaja de este tipo de arquitectura también es necesario tener una aplicación que se beneficie de ella, ya que lo ideal para escalar a cientos de millones de personas es crear un balance entre disponibilidad de datos (es decir, que los datos estén siempre disponibles en todo momento y en tiempo real), y consistencia (es decir, que todos los datos estén propiamente sincronizados entre todos los nodos).




A tal fin, el modelo recomendado (y por defecto) de Cassandra (así como de casi todas las bases de datos de este tipo) es el de un modelo "eventualmente consistente", lo que significa que los cambios se van propagando poco a poco entre todos los nodos del cluster, pero mientras tanto lo que sea que esté disponible para lectura se le ofrece al usuario mientras tanto lleguen las últimas actualizaciones.


Es por eso que este tipo de bases de datos es ideal para portales sociales como Facebook y Twitter, en donde no importa si algunos usuarios reciben una actualización poco después que otros, ya que lo importante es que todos "eventualmente" tengan todas las actualizaciones.En otras palabras, hablamos de que para sacar ventaja de este tipo de sistemas se necesita modificar la mentalidad ACID que por décadas ha gobernado las bases de datos relacionales, y pensar mas en un esquema mas práctico y flexible, si bien no 100% consistente.Obviamente este tipo de modelos no aplica a todo tipo de aplicaciones, pues por ejemplo, aplicaciones financieras son el ejemplo clásico de transacciones que deben confirmarse y estar 100% consistentes en todo momento, para cuyo caso algo como un cluster de MySQL sería quizás mejor (o dependiendo de la aplicación, una mezcla entre ambos mundos).
O en otras palabras, este tipo de bases de datos no tiene como objetivo reemplazar las tradicionales del tipo relacional, sino que complementar a estas en aplicaciones distintas para las cuales el modelo clásico simplemente no es óptimo.Noten además que debido a la naturaleza a estas bases de datos, que estas no utilizan el mismo concepto de tablas relacionadas a las que hemos estado acostumbrado por años, sino que mas bien de conjuntos de datos basados en modelos de "variable + valor", similar a las hashtables en los lenguajes clásicos de programación.


Sin embargo, si hay algo que deben sacar de este artículo, es que si eres un desarrollador de software, y quieres mojarte las manos con el futuro de las bases de datos altamente escalables, o si tienes una aplicación que necesita escalar a millones de usuarios, que este es quizás el mejor punto de partida que podrás encontrar por el momento.





Link de interesa:
Página oficial de Apache Cassandra
Introducción al modelo de datos de Cassandra
Una introducción a Cassandra para programadores de Rails


CSS para darle un estilo cuando desabilitamos un input de texto o botón, es muy simple pero útil:


Con esto hacemos que sea compatible para todo los navegadores
xxxxxxxx[disabled="disabled"], xxxxxxxx.disabled



Ejemplo:


button[disabled]:active, button[disabled],
input[type="reset"][disabled]:active,
input[type="reset"][disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
select[disabled] > input[type="button"],
select[disabled] > input[type="button"]:active,
input[type="submit"][disabled]:active,
input[type="submit"][disabled] {
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
}


2011-09-12

jQuery UI MultiSelect Widget, Estupendo elemento para tener a manos cuando creamos paneles web.


jQuery UI MultiSelect Widget es un estupendo elemento que reutiliza la estructura de jquery UI y nos permite poder complementar dentro de nuestros paneles web, generando una interfaz de administración mas amigable con el usuario; siempre y cuando tengamos la necesidad de tener un select compacto pero que permita ser multiselect a la vez, como se muestra en la imagen.




Link al sitio oficial
Link al demo


2011-09-11

Mobile HTML5 Boilerplate, ya podes tener la base de tu proyecto web para celulares y no arrancar de cero



Mobile HTML5 Boilerplate 1.1 ha lanzado , ofreciendo a los desarrolladores con una plantilla de confianza para la creación de aplicaciones Web para celulares. El sitio ofrece plantillas y documentación que pueda ayudar a los desarrolladores crear aplicaciones multiplataforma Web móviles que funcionan en los teléfonos inteligentes de hoy en día, sino que también ofrecen a teléfonos mas viejos como BlackBerry, Symbian y Windows Mobile. El proyecto en sí no es un FrameWork independiente, sino que trabaja con jQuery móvil, Touch Sencha, PhoneGap y Appcelerator.
¿Por qué es impresionante?
  • Compatibles con cualquier plataforma (Android, iOS, Blackberry, Symbian)
  • CSS clase de objetivo IE Mobile 7
  • Inicio icono de la pantalla (Android, iOS, Symbian)
  • Cruz navegador de vista de optimización de Android, iOS, IE, Nokia, Blackberry, Opera
  • Optimizado vista de escala (Android, iOS, Mobile IE, Blackberry, Opera)
  • Opción para habilitar iOS puesta en pantalla en modo de pantalla completa
  • Fuente de una mejor reproducción en IE Mobile
  • Adaptable marcado y el esqueleto CSS
  • Hoja de estilos CSS para dispositivos de gama baja
  • Mapa del sitio móvil
  • Móviles tipo MIME de apoyo
  • Herramienta de construcción para móviles
  • Se integra bien con PhoneGap y Appcelerator
Y entonces, la "impresionantes" características son:
  • HTML5 offline almacenamiento en caché de los smartphones
  • Ocultar barra de direcciones para maximizar el área de la pantalla
  • Hace clic en el botón que no espere a que el valor por defecto 300 ms evento click retraso
  • Textarea crecimiento automático
  • Ocultar Safari navegador Chrome
  • Móviles favoritos burbuja
  • Base de datos del navegador API Wrapper
  • Robusto usuario opcional de detección de agentes en. Htaccess
  • Móvil optimizado por defecto CSS
  • Los medios de comunicación consultas polyfill para Windows Mobile
  • Google Analytics para los dispositivos móviles de gama baja
La versión 1.1 del juego de herramientas ofrece dos descargas diferentes - la versión documentada con notas y enlaces y la versión libre de comentario . El proyecto también está disponible en github aquí .
Repetitivo móvil

No es un Framework, es la base para implementar desde cero una solución para celulares, teniendo compatibilidad con muchas plataformas moviles. 

Para ser claros, el repetitivo móvil no está destinada a ser una "construcción de una vez e implemente en todas partes" solución, sino que ofrece un conjunto de mejores front-end (marcado, CSS) prácticas para los desarrolladores de Web móvil para utilizar con el fin de aprovechar las características de alta gama de teléfonos inteligentes, como los que ejecuten Android o el iPhone, por ejemplo, sin dejar de ofrecer un apoyo básico para los navegadores Web más.
Los desarrolladores interesados ​​pueden obtener más información visitandohttp://html5boilerplate.com/mobile/ .
Y para más inspiración, hay un hilo en Quora enumerar varios buenos ejemplos de sitios web para móviles HTML5 aquí .