Avenida de Castilla,1 - Edificio Best Point - Oficina 21B28830 San Fernando de Henares (Madrid)

tel./fax: +34 91 675 33 06info@autentia.com - www.autentia.com

Somos su empresa de Soporte a Desarrollo Informático.Ese apoyo que siempre quiso tener...

1. Desarrollo de componentes y proyectos a medida

TecnologíaDesarrolloSistemas

Gran Empresa

Producción

autentia

Certificacióno Pruebas

Verificación previa

RFP Concurso

Consultora 1

Consultora 2

Consultora 3

Equipo propio desarrolloPiloto

3a

3b

1. Definición de frameworks corporativos.2. Transferencia de conocimiento de nuevas arquitecturas.3. Soporte al arranque de proyectos.4. Auditoría preventiva periódica de calidad.5. Revisión previa a la certificación de proyectos.6. Extensión de capacidad de equipos de calidad.7. Identificación de problemas en producción.

3. Arranque de proyectos basados en nuevas tecnologías

¿Qué ofrece Autentia Real Business Solutions S.L?

Para más información visítenos en: www.autentia.com

Compartimos nuestro conociemiento en: www.adictosaltrabajo.com

Gestor portales (Liferay)Gestor de contenidos (Alfresco)Aplicaciones híbridas

Tareas programadas (Quartz)Gestor documental (Alfresco)Inversión de control (Spring)

BPM (jBPM o Bonita)Generación de informes (JasperReport)ESB (Open ESB)

Control de autenticación y acceso (Spring Security)UDDIWeb ServicesRest ServicesSocial SSOSSO (Cas)

Spring MVC, JSF-PrimeFaces /RichFaces, HTML5, CSS3, JavaScript-jQuery

JPA-Hibernate, MyBatisMotor de búsqueda empresarial (Solr)ETL (Talend)

Dirección de Proyectos Informáticos.Metodologías ágilesPatrones de diseñoTDD

2. Auditoría de código y recomendaciones de mejora

4. Cursos de formación (impartidos por desarrolladores en activo)

Últimos tutoriales

2010-06-21Prototipado rápido depantallas (mocks) con Google Drawings

Tutorial desarrollado por

Alejandro PérezGarcía

Alejandro es sociofundador deAutentia y nuestroexperto en J2EE,Linux y optimizaciónde aplicacionesempresariales.

Ingeniero enInformática yCertifiedScrumMaster

Si te gusta lo que ves, puedes contratarle paraimpartir cursos presenciales en tu empresa o paraayudarte en proyectos (Madrid). Puedesencontrarme en Autentia

Catálogo de servicios de Autentia

Descargar (6,2 MB)

Descargar en versión comic (3,1 MB)

AdictosAlTrabajo.com es el Web de difusión deconocimiento de Autentia.

Catálogo de cursos

Share |

Descargar este documento en formato PDF: mocksGoogleDrawings.pdf

Fecha de creación del tutorial: 2010-06-21

Prototipado rápido de pantallas (mocks) conGoogle Drawings

Creación: 18-06-2010

Índice de contenidos

1. Introducción2. Entorno3. ¿Qué es Google Drawings?4. ¿Pero estamos locos, o qué?5. ¿Cómo podemos usar el wireframe kit de Morten Just?5.1. Uso del “Web Clipboard”

Inicio Quienes somos Tutoriales Formación Comparador de salarios Comentar libro Charlas

Más

Catálogo deserviciosAutentia

Tríptico(6,3 MB)

Cómic (3,1 MB)

Acceso de usuarios

registrados:

E-mail:

Contraseña:

Entrar

Deseo registrarme

He olvidado mis datos de acceso

Registra tu empresa:

Descubre las ventajas de registrar tu empresa en

AdictosAlTrabajo...

Registrar mi empresa

Listado de empresas ya registradas

Web

www.adictosaltrabajo.com

Buscar

Ultimas Noticias » Creamos el grupo amigos de AdictosAlTrabajoen Facebook » ¡¡¡¡ESPAAAAAAAAAAAAAAAAÑA!!!! » VIII Charla Autentia - Alfresco CommunityEdition - Vídeos y Material » IX Charla Autentia - Android » Autentia Cycling Day » La conferencia Agile-Spain2010 ya está aquí¿Te la vas a perder? » VIII Charla Autentia - Alfresco Community

+Noticias Destacadas » Creamos el grupo amigos deAdictosAlTrabajo en Facebook » VIII Charla Autentia - Alfresco CommunityEdition - Vídeos y Material » IX Charla Autentia - Android » La conferencia Agile-Spain2010 ya está aquí¿Te la vas a perder?

+Comentarios Cómic

+Enlaces

Hosting patrocinado por

Estas en: Inicio Tutoriales Prototipado rápido de pantallas (mocks) con Google Drawings

Anuncios Google Descargar Tutoriales Tutoriales De MySQL 2D Game Tutorial MySQL PHP Tutoriales Español

2010-06-17IAQ (Interesting Asked Questions), SPI ¿qué es,hay que usarlo, o no,cuándo?

2010-06-14Instalar PostgreSQL en Mac OS X Snow Leopard

2010-06-14Integrando tus redes sociales con HootSuite

2009-02-26Edición de vídeo parapublicar en YouTube (II)

2010-06-14Primeros pasos en comunidad

2010-06-11Cómo analizar con Sonarun proyecto sin maven

2010-06-11DBUnit y aplicaciones JDBC

2010-06-11Edición de vídeo parapublicar en YouTube (I)

2010-06-10Generación de Informescon JasperReports en PHP

2010-06-07Introducción a BPMN

2010-06-07Instalación Intalio Server

2010-05-31JSF 2 Ajax y Bean Validation

2010-05-27Instalación IntalioDesigner

2010-05-26Generar facturaselectrónicas de maneragratuita

2010-05-25Atajos de teclado másutilizados para Eclipse

6. Algunos trucos para el manejo de Google Drawings7. Conclusiones8. Sobre el autor

1. Introducción

Hace algunos días mi compañero Roberto Canales escribía un tutorial(http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=mockups) sobre Balsamiq Mockups(http://www.balsamiq.com/), posiblemente una de las mejores herramientas para prototipado rápido depantallas (o por lo menos una de las que más me gustan ;)

En este tutorial vamos a ver otra alternativa: Google Drawings.

2. Entorno

El tutorial está escrito usando el siguiente entorno:

Hardware: Portátil MacBook Pro 17' (2.93 GHz Intel Core 2 Duo, 4GB DDR3 SDRAM, 128GB Solid StateDrive).

NVIDIA GeForce 9400M + 9600M GT with 512MB

Sistema Operativo: Mac OS X Snow Leopard 10.6.3

PostgreSQL 8.4

3. ¿Qué es Google Drawings?

Si disponemos de una cuenta de Google, seguramente ya conozcamos Google Docs (http://docs.google.com).Goolge Docs es una suite de ofimática en la nube, que Google nos ofrece de forma gratuita. Con esta suitepodemos crear documentos, hojas de cálculo, presentaciones y algunas cosas más.

Pues bien, Google Drawings es la más reciente incorporación de Google a su suite de ofimática en la nube,permitiéndonos en este caso dibujar. En efecto Google Drawings es simplemente una herramienta de dibujo, alestilo del Paint de Windows.

2010-05-24Botones para añadireventos directamente a calendario (Google Calendar y Outlook)

2010-05-24Procesar un fichero EDI con Talend

2010-05-17Añadir botones parasocial bookmarking y sharing service.

2010-05-17Intercomunicación entreportlets.

2010-05-17Actualización de bugzillaa la versión 3.6.

2010-05-11eCobertura y EclEMMA: Plugins para la mediciónde cobertura del código.

2010-05-11VirtualBox. Configuraciónde la conexión de red.

2010-05-11Múltiples datasources enJasperReports

2010-05-10Utilización de arquetiposy plugins de LifeRay paraMaven.

2010-05-07Instalar un componente en Talend Open Studio (TOS)

2010-05-06Talend Open Studio (TOS) 4.0

2010-05-05Gestión de los Requisitos(y II) : los casos de uso

2010-05-05Gestión de los requisitos

2010-05-04Declaración de IVAtrimestral en la AEAT por Internet

2010-05-04

jajaja, menos mal que en la empresa no me dedico yo al diseño :P

4. ¿Pero estamos locos, o qué?

Esta es la pregunta que os podríais hacer cualquier de vosotros al llegar a este punto. ¿Cómo se nos ocurreusar un programa de dibujo para hacer prototipado rápdio de pantallas? Eso sería de todo menos “rápido”.

Pues bien, en principio tendríais razón si no fuera por gente como Morten Just que ha preparado una colecciónde mocks para usar con Google Drawings. Podemos encontrar esta colección en su página “A wireframe kit for Google Drawings and 5 reasons it beats Omnigraffle and Visio”(http://mortenjust.com/2010/04/19/a-wireframe-kit-for-google-drawings/).

¿En qué consiste este “wireframe kit”? Simplemente es una colección de dibujos que representan componentescomunes, de forma que podamos hacer copy/paste y así vayamos construyendo nuestros prototipos depantallas.

De hecho tenemos varios documentos, de forma que cada uno de ellos contiene componentes de un tipodeterminado, por ejemplo para móviles, para aplicaciones web, …

5. ¿Cómo podemos usar el wireframe kit de Morten Just?

Es muy sencillo, basta con pinchar sobrehttp://docs.google.com/leaf?id=0B6D4v-c42Zy5NjdkMDAwMzMtMTQ0MC00ODBkLWIyYWEtZTM5OGEzNzYxNmVm&hl=en_GBy tendremos acceso a todos los documentos. Esta una característica muy interesante de Google Docs, y es quepodemos publicar nuestro trabajo para compartirlo con los demás.

Certificados en Firefox (FNMT y AEAT)

2010-04-26JCaptcha - Generación deCaptchas en Java

2010-04-23Instalar Puente PHP-Javaen Tomcat

2010-04-22AppWidget Android: Ejemplo usando BroadcastReceiver yLocalización

2010-04-20Facelets en JSF 2: sistema de plantillas y componentes porcomposición.

2010-04-19DbVisualizer free version.

2010-04-09Session TimeOut en RichFaces, con el soportede Jboss Seam.

2010-04-08Jetspeed-2 de Apache Software Foundation

2010-04-07Primeros pasos con Balsamiq Mockups

2010-03-18Revisando los ejemplos de Cocos2d para IPhone.

2010-03-16Organización de eventoscon StageHQ

2010-03-15Retrasar la carga de Javascript con jQuery.getScript().

2010-03-15Optimización de páginasweb con Page Speed.

2010-03-09JSF 2 ya está aquí !!! TheJSF Return, ahora mássencillo que nunca !!!

2010-03-08Instalación de tusprogramas en tu IPhone.

Una vez tenemos la la lista de documentos pinchamos sobre el que nos interese, y se nos mostrará el detalle deese documento.

Ahora podemos pinchar sobre “Open” y el documento se abrirá en modo de solo lectura.

2010-03-04Sacar Release de un proyecto con Maven

2010-03-03Instalación de Subversiony Apache en Ubuntu

2010-03-03Cómo instalar la JDK deSUN en Fedora Linux

2010-03-02Creando un botón decompra de Paypal con datos cifrados

2010-03-01Creación de un plugin detipo hook en Liferay

Últimas ofertas deempleo

2010-04-28Comercial - Compras - CORDOBA.

2010-04-25Otras Sin catalogar - MADRID.

2010-04-25Atención a cliente - CallCenter - MADRID.

2010-04-21Comercial - Ventas - MADRID.

2009-06-25Atención a cliente - CallCenter - BARCELONA.

Aquí podemos ver toda la “paleta” de componentes que tenemos a nuestra disposición en este documento (en laparte gris de la izquierda). Morten Just ha sido muy hábil, ya que al poner la “paleta” en la zona gris deldocumento, consigue que todos estos elementos se ignoren al exportar, imprimir, ... el documento.

Para empezar a trabajar, sobre este documento de solo lectura hacemos File --> Make a copy... Y, tras confirmar la operación, se nos creará un documento nuevo, este caso nuestro, que podremos modificarlibremente.

Una vez tenemos nuestro propio documento es tan sencillo como ir haciendo copy/paste para ir formandonuestro prototipo.

5.1. Uso del “Web Clipboard”

El método que hemos visto antes nos permite usar las paletas, pero tenemos que crear un nuevo documento apartir de la plantilla. Si simplemente queremos usar un mock podemos hacer copy/paste de este elementoconcreto usando el Web Clipboard. Este elemento es el tercer icono por la izquierda que encontramos en la barrade herramientas, y que tiene forma de un portapapeles con una nube.

Anuncios Google

Este Web Clipboard nos permite no sólo copiar elementos de un dibujo a otro otro, sino que nos permite coparelementos entre distintos tipos de documentos, por ejemplo de una hoja de cálculo a una presentación, por loque se convierte en una herramienta muy potente.

6. Algunos trucos para el manejo de Google Drawings

Vamos a listar algunas “formulas” para utilizar Google Drawings:

Para seleccionar varios elementos podemos, con el ratón, trazar un rectángulo. Todos los elementos quequeden dentro o toquen este rectángulo, quedarán seleccionados.

Para seleccionar varios elementos lo podemos hacer con shift + click sobre el elemento que queremosañadir al conjunto de elementos seleccionados.

Podemos agrupar juntos variso elementos, de forma que sea mas sencillo luego moverlos o manipularlso en bloque.

Para mover de forma “fina” (desplazamiento más preciso) podemo pulsar alt mientras se mueve la figura.

Para redimensionar una forma y mantener el aspecto de alto/ancho podemos pulsar shift mientrasredimensionamos la figura.

Cmd + z, deshará la última operación.

No es lo mismo Edit --> copy/paste, que el Web Clipboard.

7. Conclusiones

Hemos visto como podemos convertir un programa de dibujo en una herramienta de prototipado rápido depantallas. Esto nos demuestra como con algo de ingenio se pueden hacer grandes cosas.

Además Google Docs aporta algunas ventajas interesantes como:

que podemos compartir los documentos con todos los miembros del equipo, de forma que conseguimosun entorno de trabajo colaborativo.

que está en la nube, por lo que siempre que tengamos un navegador tendremos disponible nuestrotrabajo. Y además no nos tenemos que preocupar de hacer copias de seguridad.

Share |

que es gratis.

8. Sobre el autor

Alejandro Pérez García, Ingeniero en Informática (especialidad de Ingeniería del Software) y CertifiedScrumMaster

Socio fundador de Autentia (Formación, Consultoría, Desarrollo de sistemas transaccionales)

mailto:alejandropg@autentia.com

Autentia Real Business Solutions S.L. - "Soporte a Desarrollo"

http://www.autentia.com

¿Qué te ha parecido el tutorial? Déjanos saber tu opinión y ¡vota!

Muy malo Malo Regular Bueno Muy bueno

Votar

(Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

Autor Mensaje de usuario registrado

Puedes inscribirte en nuestro servicio de notificaciones haciendo clicaquí.Puedes firmar en nuestro libro de visitas haciendo clic aquí.Puedes asociarte al grupo AdictosAlTrabajo en XING haciendo clicaquí.

Añadir a favoritos Technorati.

Anímate y coméntanos lo que pienses sobre este tutorial

Puedes opinar o comentar cualquier sugerencia que quieras comunicarnos sobre este tutorial; con tu ayuda, podemos ofrecerte un mejor servicio.

Enviar comentario

(Sólo para usuarios registrados)

» Registrate y accede a esta y otras ventajas «

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-Nocomercial-Sin obras derivadas 2.5

Recuerda

Autentia te regala la mayoría del conocimiento aquí compartido (Ver todos los tutoriales). Somos expertos en: J2EE, Struts, JSF, C++, OOP, UML, UP, Patrones de diseño ... y muchas otras cosas.

¿Nos vas a tener en cuenta cuando necesitesconsultoría o formación en tu empresa?, ¿Vas a ser tangeneroso con nosotros como lo tratamos de ser con vosotros?

Somos pocos, somos buenos, estamos motivados y nos gusta lo que hacemos ...

Autentia = Soporte a Desarrollo & Formación.

info@autentia.com

Nota:

Los tutoriales mostrados en este Web tienen como objetivo la difusión del conocimiento. Los contenidos ycomentarios de los tutoriales son responsabilidad de sus respectivos autores. En algún caso se puede hacerreferencia a marcas o nombres cuya propiedad y derechos es de sus respectivos dueños. Si algún afectadodesea que incorporemos alguna reseña específica, no tiene más que solicitarlo. Si alguien encuentra algúnproblema con la información publicada en este Web, rogamos que informe al administradorrcanales@adictosaltrabajo.com para su resolución.

Tutoriales recomendados

Nombre Resumen Fecha Visitas

Prototipadorápido depantallas (mocks) con Google Drawings

Hace algunos días mi compañero Roberto Canales escribía un tutorial(http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=mockups) sobre Balsamiq Mockups (http://www.balsamiq.com/), posiblemente una de las mejores herramientas para prototipado

2010-06-21

Primeros pasos en comunidad

Hace ya mucho tiempo que decidí que no iba a ser la primera persona que"comprase" las cosas que salen. Me gusta ser del grupo que trabaja con las cosas cuando alguien me las cuenta o "cuando ya hay libros en castellano".

2010-06-14 153

Integrando tus redes sociales con HootSuite

Ya que me he introducido a Twitter y tengo cuentas en Facebook y Linkein ¿Yahora que hago para no tirarme todo el día publicando en distintos sitios? Lomejor, es copiar a los demás.Si miramos en Twitter, podemos ver los clientesque utiliza la gente.

2010-06-14 144

Edición devídeo parapublicar en YouTube (I)

En este tutorial vamos a ver de forma sencilla cómo podemos editar vídeo:peso, formato, audio, subtitulado, logos... para su publicación en YouTube,con las restricciones de tamaño y duración que ello impone.

2010-06-11 271

Generar facturaselectrónicasde manera gratuita

Últimamente se oye hablar mucho de factura electrónica, sin embargo aúnexiste un gran desconocimiento alrededor de ella. Una factura electrónica esel equivalente a la factura tradicional en papel, esto es, cuenta con la misma validez legal.

2010-05-26 1042

Atajos de teclado másutilizados para Eclipse

Rompiendo un poco la línea de mis tutoriales, voy a realizar éste en el queenseño pequeños truquitos (atajos) para realizar con el entorno de desarrollode Eclipse con los que nos ahorraremos tiempo y seguramente muchos quebraderos de cabeza.

2010-05-25 865

Botones para añadireventos directamente a calendario (Google Calendar y Outlook)

Continuando con nuestra intención de añadir cada vez más funcionalidad ycomplementos a nuestras noticias en Adictos, vamos a ver cómo incluir unosbotones que permitan al lector añadir un evento rápidamente a su calendario(Google Calendar o Outlook).

2010-05-24 576

Añadirbotones para social bookmarking y sharing service.

Recientemente hemos descubierto la existencia del servicio de "Social bookmarking y sharing" o lo que es lo mismo, introducir marcadores sociales y poder compartir enlaces en internet.

2010-05-17 554

Certificados en Firefox (FNMT y AEAT)

En este tutorial vamos a ver cómo podemos instalar los certificados raíz de laFNMT para que por fin podamos realizar nuestras declaraciones online con Hacienda en Firefox, sin desesperarnos y finalmente saltar al Internet Explorer.

2010-05-04 1282

Declaraciónde IVA trimestral en la AEAT por Internet

En este tutorial vamos a ver cómo hacer la declaración de IVA trimestralusando el modelo 303 en la web de la Agencia Tributaria.

2010-05-04 928