Nueva Rama: AppWeb

Pues en estos días he estado haciendo una Landing Page del Proyecto (colocada en una nueva rama: AppWeb)  que sirve en un futuro como la página de inicio de la web que permita a los usuarios que quieran acceder mediante interfaz web a toda la herramienta que proporciona Qdemos, ahora mismo sólo para Android. De esta manera, usuarios que no sean de Android, podrán usar Qdemos mediante esta AppWeb.

Eslogan de Qdemos!

Eslogan de Qdemos!

El trabajo de hacer la Landing Page de la AppWeb, basicamente ha llevado quebraderos de cabeza en lo referente al diseño, que al fin y al cabo es lo que debe predominar en una Landing Page. Antes de explicar la estructura que he decidido crear en esta Landing Page para reflejar la temática de Qdemos, diré algunas tecnologías y librerias usadas para llevar a cabo esto. Cabe destacar que esta AppWeb con su Landing Page, en un futuro se mimetizará con el back-end que ya está creado donde se definen todas las APIs de tipo REST que utiliza la app Android. Por ello la tecnología que debería usar no es otra que Node.js para despues integrarlo todo en una solo Web que tenga el Front-End, y el Back-End que sirva tando de APIs para Android como de AppWeb.

Dicho esto, en esta rama he utilizado, entre otras librerias/frameworks:

  • Para el BackEnd:
    • Node.js, que define el servidor en JavaScript, que no hace falta para la LandingPage, pero que lo introduzco ya para después mimetizarlo con el Back-End.
    • Express.js, para resolver las Rutas, y por el mismo motivo que he descrito arriba.
  • Para el FrontEnd:
    • Angular.js, de momento no se usa, ni está incluido, pero está pensado para que en un futuro resulte sencillo y rápido crear toda la WebApp.
    • BootStrap, para el diseño de la web y todos sus elementos.
    • Textillate, libreria muy chula para ‘dar vida’ a textos dinámicos.

Y ya está. Una vez descrito esto, pasaré a explicar cómo está confeccionada la Landing Page, que aún no está ‘live’ porque quiero que sea una sopresa para más adelante, pero que ya está totalmente operativa… en mi ordenador en local ^.^

Lo que he querido representar es dos aspectos fundamentales:

  • Cuál es la funcionalidad de Qdemos que la diferencia del resto
  • Dónde ha sido elaborado Qdemos

Con estas dos premisas lo que he hecho ha sido poner de background en la Landing Page, un TimeLapse espectacular de Tenerife para reflejar que Qdemos! es un producto ‘Made in Canarias’. Y de hecho así lo refleja el Footer que le he creado para la wen que dice:

Hecho desde Canarias con mucho ♥

En lo referente a la funcionalidad de Qdemos he querido representarlo con el hecho de expresar lo fácil que es su utilización. De hecho ya he creado la tipica caja de Login de la WebApp del futuro, que está incluida en esta Landing Page y que es minimalista a más no poder. Un simple botón (que permite el Login de momento con Facebook). Ya está eso es todo. Junto a esto he acompañado el logo de Qdemos!, incrustado en la misma palabra. Debajo de este elemento de Login muy sencillo, he colocado un banner con frases que explican lo que representa Qdemos!. Estas frases, gracias a la librería Textillate, van cambiando de forma dinámica haciendo efectos de entrada y salida muy chulos. ¡Vaya vida que le da a la Landing Page!. Entre esas frases podemos encontrar:

  • Menos Whatsapp y Más Ven a Verme (Esta será el lema de Qdemos!, una frase vista en un cartel (el típico cartel) de la Autopista del Norte (Altura Puerto De La Cruz-Cuesta de La Villa) que sirvió de inspiración para crear Qdemos!)
  • Quedar con tus amig@s nunca fue tan fácil
  • Encuentra la fecha exacta para quedar con ell@s
  • Un Proyecto hecho en Canarias
  • De Código Totalmente Libre
  • Es hora de desvirtualizar a quién tú y yo sabemos
  • Un abrazo vale más que 1000 emoticonos
  • Organiza las quedadas de tu grupo de amig@s
  • Propón visitar a tus amig@s ese rincón tan especial
  • Queda con ese grupito de amig@s que llevas tanto tiempo sin ver
  • Da el primer paso y organiza la Quedada
  • Qdemos es la herramienta que estabas buscando

Y ya está, esto es todo, la Lading Page así es como la pensé y así es como la materialicé. Cualquier sugerencia será bienvenida :).

Y como siempre os dejo con el commit de todo esto: COMMIT.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s