Geeks Chapines

¿Recuerdas cómo eran Google o Youtube en sus inicios?, ¿pudiste acceder a la primera versión de Facebook?, ¿sabías que Twitter en sus inicios era verde, y con un logo muy diferente al de ahora? Las páginas webs más populares del mundo comenzaron siendo simples bocetos en internet de emprendedores desconocidos, que lograrán amasar fortunas sólo partiendo de su innovadora idea en internet. El cambio y la evolución de estas webs hacen contrastar enormemente las primeras versiones de las actuales. Aquellas tenían un marcado matiz artesanal, pues eran producto de una o dos personas. Desde que nació y creció internet, a comienzos de los años 90, el mundo web no ha mostrado en ningún momento signos de dejar de crecer.

Cambios obviamente notables, MySpace, YouTube, por el contrario la que parece artista conservadora, de esas que por más dinero que tengan no se dan ni una manita de gato con el cirujano sigue siendo facebook, por el contrario YouTube es todo lo contrario, hasta me recordó a Shakira, vean la última comparación

Facebook

Leer más »

En este video pueden repasar la creación y modificación de la apariencia de las capas (div) desde CSS y hay una interesante explicación relacionada con centrar estas capas y respecto a los estándares utilizados por la w3c.

Referencias: http://www.w3schools.com/

Otra forma de maquetado con CSS

Hace un par de días publiqué sobre el diseño web y los wireframes, hoy continúo escribiendo sobre el tema y es precisamente comentando un par de programas para trabajar con los wireframes o prototipos web, como recordarán, un wireframe es una ilustración visual de una página Web. Es la intención de mostrar todos los elementos que se incluyen en una página determinada, sin definir el aspecto y sensación (o el diseño gráfico).

Pencil Proyect es una herramienta muy sencilla de instalar ya que consiste en un complemento para el firefox o bien una instalación independiente para Windows, a continuación los 2 enlaces:

Para Firefox 3+
(No compatible con 6)

Para Windows independiente

Hot Gloo – The Online Wireframe App

Esta herramienta está disponible únicamente desde la nube, es decir, solamente disponible en línea.

Enlace: http://www.hotgloo.com/lookup

Denim

El denim es una aplicación de escritorio gratuita que está disponible para Windows, Unix y Mac OS X. Se define así como “una herramienta informal para el sitio Web temprana etapa de diseño y la interfaz de usuario”. Me gustó especialmente por su similitud con las maquetas(prototipos) que regularmente obtenemos in situ, aunque puede resultar complejo de manejar.

Enlace: http:/dub.washington.edu:2007/projects/denim/

Cacoo

Es la utilidad en línea más atractiva y más completa que encontré, incluye herramientas para diseño de diagramas (clases, de usos, estados, etc.), permite colaboración entre varios participantes, lo que facilita el desarrollo de proyectos con equipos de trabajo.

Enlace: http://cacoo.com/

iPhone Mockup Web App

Por último, esta aplicación web muy simple le permite crear su propia maqueta de aplicaciones para iPhone, compartirlas con otras personas, y hacer los cambios entre colaboradores, con los que se ha compartido la URL de la maqueta.

Disponen de 2 opciones para diseñar, una con apariencia más profesional y la otra con apariencia más parecido al diseño a mano alzada.

Esta aplicación se encuentra actualmente en alfa y no ofrece protección por contraseña (todos los que tengan o adivinen la URL de la maqueta, puede acceder y cambiarla), así que recomiendo utilizar esta aplicación con cuidado.

Enlace: http://iphonemockup.lkmc.ch/

Jeje olvidaba mencionar el que yo utilizo su nombre Justinmind Prototyper, es de los pocos programas de este género que he encontrado disponible en español, muy intuitivo y a la vez completo, pero básicamente hace lo mismo que otros antes mencionados.

Enlace: http://www.justinmind.com/

Escrito por Mario German Reyes (@mager19), de imaginandolaweb.com para la iniciativa blogger invitado, vos también podes participar.

Todos los que de una u otra forma diseñamos webs, tenemos la tendencia de realizar nuestro diseño en vivo por así decirlo, creamos nuestra imagen directamente en un software especializado(Dreamweaver, u otros), pasamos a maquetar, y armamos nuestro sitio sin ni siquiera tener un diseño en papel. Para dar a entender lo que esto significa podemos imaginar a un arquitecto que inicia un edificio sin tener planos. Sé que muchos van a decir esto es básico la pregunta es en serio debe tomarse como algo básico, este artículo mostrara que es un wireframe y la manera correcta de hacerlos.

¿Qué son wireframes?

Son un conjunto de dibujos que representan cómo estarán organizados los elementos en las páginas, sin elementos gráficos, de tal manera que implementan aspectos generales del sistema sin entrar en detalle, por ejemplo podemos crear la página principal y definir en donde ira nuestro menú sin necesidad de saber de una vez como va quedar, solo tenemos su ubicación y orden.

Entonces para colocarlo en nuestras palabras es la forma gráfica previa al diseño en la cual sabemos dónde van a estar puestos los elementos, la manera más práctica de plasmar lo que tenemos en nuestra cabeza cuando imaginamos un diseño web.

¿Qué elementos deben incluirse en nuestro wireframe?

• Elementos de navegación: menús, enlaces.
• Elementos de información: contenidos de texto e imágenes.
• Elementos de interacción: herramientas o funcionalidades que el usuario puede realizar, slides, banners, widgets.
• Elementos de apoyo: ítems de ayuda y orientación, como mapas de navegación o faqs.
• Elementos promocionales: espacio dedicado a banners publicitarios o a destacados internos del propio producto.

¿Qué ventajas tenemos de usar un wireframe en el momento de diseñar?

• Se tiene la visión clara de hacia dónde va enfocado el proyecto gráficamente hablando.
• Si se trabaja en equipo se pueden delegar funciones teniendo claro que estándar se va manejar.
• Tener un registro grafico para realizar cambios radicales en el diseño, o en el caso que se vaya a realizar un rediseño se cuenta con una base para iniciar el trabajo.
• El cliente puede ver la forma básica que tendrá su web, lo que permitirá realizar cambios antes de realizar todo en el software.
• Mejorar sensiblemente la forma en que se trabaja, se tiene una calidad gráfica mejor, y es una nueva forma de mostrar que cuentas con estándares de diseño.
• Cuando un wireframe es aprobado por el cliente, los comentarios posteriores sobre la presentación de una página pueden estar asociados a la percepción de diseño, uso de colores, tipografía, etc. Pero ya no debiera cuestionarse la estructura y disposición de elementos de una página (todos sabemos que el cliente cambia de opinión de una noche para otra esto evitara ese tipo de cosas).
• Personalmente colecciono los wireframes de proyectos realizados, para recurrir a ellos cuando te faltan las ideas, o simplemente a modo de satisfacción.

¿En qué tipos de proyectos se pueden usar los wireframes?

Bueno es aplicable a todo tipo de proyectos desde una web sencilla, un newsletter, pasando por los blogs, las webs empresariales, y grandes proyectos que involucren diseño y programación. En estos últimos incluso se tiene la buena práctica de enlazar simuladamente los wireframes lógicamente con sus nombres o referencias.

Ejemplos de wireframes:

¿Cómo se realizan los wireframes?

Bueno creo que la mejor forma de realizarlos es mano, porque te da el contacto con lo que estas diseñando, usar reglas o simplemente con tu pulso, claro que también existen herramientas especializadas para realizar este tipo de trabajos, las cuales mencionaremos en otro post.

¿Qué nos queda?

Que un wireframes es un dibujo en el que mostramos la ubicación de los elementos de un sitio,  que deben estar todos los elementos que se usaran en el diseño, que tiene la ventaja de estar enfocados respecto al aspecto gráfico, el equipo de trabajo tiene un norte común y que el cliente debe aprobar nuestro wireframe para así comenzar con el diseño.

Código HTML del repaso (tienen que re-teclearlo)

Aunque no soy de la idea de que cualquiera ande armado, este es un muy ingenioso “modelo” en lo que a montaje se refiere

El modelo parece que se llama NOKIA 356 aunque tiene el tamaño de una .10

Closure Tools es una suite compuesta por varias herramientas con las que desarrollar aplicaciones web de forma más sencilla y que Google ha venido usando hasta la fecha para desarrollar Gmail, Google Docs o Google Maps.

Closure Compiler, Closure Library y Closure Templates son las herramientas que componen hasta la fecha, la suite Closure Tools:

-Closure Compiler, herramienta que permite compilar y chequear la sintaxis de JavaScript de forma que elimina el código inservible permitiendo que se ejecute más rápido y logremos aplicaciones mas sencillas de mantener.

Closure Compiler puede usarse con Closure Inspector una extensión de Firebug que hace debugging de los errores en Javascript ofuscado.

-Closure Library: libreria JavaScript con la que ayudar a los desarrolladores con diferentes funciones como modificar el DOM, estructura de datos, animaciones….

-Closure Templates plantillas para el desarrollo de nuestros propios proyectos.
Interesados pueden acceder a Closure Tools desde http://code.google.com/intl/es-ES/closure/

http://googlecode.blogspot.com/2009/11/introducing-closure-tools.html