5. Prototipado

Enginyeria del Software I

prototipadoGrau en Enginyeria InformticaInteracci Persona-OrdinadorToni Granollers

Prototyping is a great opportunity to broaden your scope explore larger issues of site purpose, understanding, and user preferences.

Toni AllenSr. Usability Researcher and Analyst

El Curso de Interaccin Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

IPO GEInformtica, curs 2014-154.-Tcniques de PrototipatToni Granollers.1

Getting creative with your testing strategy in the Prototyping stage of any project can have big payoffs. Even if you think you dont have anything in-hand that can be tested, early feedback could mean the difference between a good project and a great project. (Were gunning for great!)

http://www.usertesting.com/blog/2014/01/03/creative-ways-to-prototype-your-way-to-success/?utm_source=rss&utm_medium=rss&utm_campaign=creative-ways-to-prototype-your-way-to-success&utm_reader=feedlyTcnicas de Prototipado - GEInformtica, IPO2 / 83


Breve descripcinEn el contexto de la disciplina IPO iterar hacia la consecucin de una meta es fundamentalLos prototipos constituyen una herramienta imprescindible para conseguirlo.En esta asignatura entenderemos el concepto de prototipado en el contexto del diseo de sistemas interactivosconoceremos las diferentes tcnicas

http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototypingFail often, fail soon and fail cheapTcnicas de Prototipado - GEInformtica, IPO3 / 83

1. Fail Soon: Fallar en etapes poc avanades del projecte de manera que rectificar no supositant cost o molstia que rectificar en etapes bastant avanades.2. Fail Often: Fallar el mxim possible ja que una fallada al cap i a la fi representar unamillora per al projecte3. Fail Cheap: Fallar en etapes poc avanades fa que no hi hagi tants costs.34.-Tcniques de PrototipatIPO GEInformtica, curs 2014-15Formaci GFT. Tcnicas de Prototipado [T. Granollers - 2012]

El objetivo principal de este mdulo es que el alumno conozca el concepto, la importancia y la finalidad de realizar prototipos para implementar aplicaciones interactivas.Conocer, adems, las principales tcnicas de realizacin de prototipos y ver ejemplos.

ObjetivosTcnicas de Prototipado - GEInformtica, IPO4 / 83

Modelo de procesoDiseo centrado en el usuariohttp://www.grihotools.udl.cat/mpiua/fases-mpiua/prototipadoTcnicas de Prototipado - GEInformtica, IPO5 / 83

PrototipadoNo podemos hacer una implementacin a gran escala a partir del diseo inicial de la interfaz

Para poder realizar evaluaciones de la usabilidad en las etapas iniciales necesitamos prototipos

Son documentos, diseos o sistemas que simulan o tienen implementadas partes del sistema final

Es una herramienta muy til para hacer participar al usuario en el desarrollo y poder evaluar el producto ya en las primeras fases del desarrollohttp://www.grihotools.udl.cat/mpiua/fases-mpiua/prototipadoTcnicas de Prototipado - GEInformtica, IPO6 / 83

PrototipadoQu es un prototipo?Un prototipo es una implementacin parcial pero concreta del diseo de un sistema. Los prototipos pueden ser creados para explorar muchas cuestiones acerca del sistema durante el desarrollo del mismo. Y, un prototipo de una interfaz de usuario es un prototipo realizado con la finalidad de explorar los aspectos interactivos del sistema (Rosson & Carroll, 2002), incluyendo la usabilidad, la accesibilidad y/o la funcionalidad del mismo.

http://www.grihotools.udl.cat/mpiua/fases-mpiua/prototipadoTcnicas de Prototipado - GEInformtica, IPO7 / 83

PrototiposRazones de su usoEn las aproximaciones de DCU los prototipos constituyen mucho ms que simples demostraciones del producto; se utilizan para recoger las impresiones del usuario para repercutirlas en el diseo de la interfaz [ISO 13407, Pg. 9]

Los prototipos responden cuestiones y dan soporte a los diseadores a la hora de escoger entre varias alternativas.

Es ms, sirven para una gran variedad de propsitos como por ejemplo para probar la fiabilidad tcnica de una idea, clarificar requisitos que quedaron imprecisos, ver como responde con el resto de la aplicacin, etc.

Tcnicas de Prototipado - GEInformtica, IPO8 / 83

You can learn a lot in a variety of different areas when building out a prototype:Learning about the PROBLEMWhat do we now know about what were trying to design for?How did building the prototype change our perceptions of how to solve the problem?What parts of the problem are easily solved?What parts of the problem remain big challenges?Learning about our USERSWhat new things do we now understand about our users?What new questions do we have about them?What will be easy for users to do with our design?What might still be messy for them to accomplish?Learning about the MATERIALSWhat will be easy to implement?What will be a challenge to pull off well?What new skills do we have to master to get the best design?Learning about POTENTIAL SOLUTIONSWhat design alternatives are there?Which of those alternatives provide the best outcomes?Why do the less appealing outcomes fail the design?What elements might be useful design patterns going forward?


https://www.uie.com/articles/pitfalls_prototyping/IPO GEInformtica, curs 2014-154.-Tcniques de PrototipatToni Granollers.9

PrototipoClasificacinBaja-fidelidadSon rpidos, baratos y diseados para obtener informacin del usuario lo mas pronto posible

Alta-fidelidadLos prototipos de alta fidelidad son ms costosos e implican generalmente programacin aunque son ms aproximados al diseo final

http://www.smashingmagazine.com/2010/06/16/design-better-faster-with-rapid-prototypingTcnicas de Prototipado - GEInformtica, IPO10 / 83

VentajasInconvenientesCostes desarrollo bajosLimitado para la correccin de erroresRpida creacinEspecificaciones poco detalladas (para pasar a codificacin)Fcilidad cambios: Cualquiera puede realizar cambiosDirigido por el evaluadorEvaluacin mltiples conceptos de diseoSu utilidad disminuye cuando los requisitos estan bien establecidostil para el diseo general de interfacesNavegacin y flujo de aciones limitadasAuto-sensacin de pruebaPruebas sin respuesta realFuncionalidad de tareas completaElevados costes de desarrolloCompletamente interactivoRequieren mucho tiempo de implementacinDirigido por el usuarioMayor dificultad de cambiarNavegabilidadCambios solo realizables por el autorAspecto semejante al producto finalCrea falsas expectativas de producto casi finalizadoPuede servir como especificacinMenor efectividada para recoger requisitosPuedes servir como herramienta de marketing (demostraciones de ventas)

BAJAfidelidadALTAfidelidadTcnicas de Prototipado - GEInformtica, IPO11 / 83

Vertical prototypeScenario

Horizontal prototype

Full interface

Nielsen, J. (1993) Usability Engineering, p93-101, Academic Press. Prototipos verticalesIncluye una parte de las funcionalidadesSirve para realizar evaluaciones ms verdicas

Prototipos horizontalesInterfaz completa sin funcionalidades subyacentesSimulacin: No se puede realizar trabajo real

EscenariosPrototipoClasificacinTcnicas de Prototipado - GEInformtica, IPO12 / 83

Fases: Lifecycle definitionDefine: bussiness goals, roles and use cases

scenarios/low-fi prototypes

Key users/stakeholders validate scenarios/low-fi prototypes

Hi-fi prototypes (screens, interactions, data behaviour)

Key users/stakeholders validate Hi-fi prototypes


Bocetos (sketching)Los bocetos son maneras de representar primeras ideas.

Se usan en la etapas ms iniciales del diseo, a menudo antes incluso de determinar muchos aspectos del anlisis de requisitos, con la finalidad de recoger las primeras impresiones del espacio de trabajo de la interaccin.

http://www.grihotools.udl.cat/mpiua/bocetos-sketching


Bocetos (sketching)



http://uxdesign.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design/IPO GEInformtica, curs 2014-154.-Tcniques de PrototipatToni Granollers.15

Prototyping toolkit of a UX practitioner

http://uxdesign.smashingmagazine.com/2014/03/06/building-clickthrough-prototypes-to-support-participatory-design


Bocetos (sketching)

http://www.alistapart.com/articles/sketching-the-visual-thinking-power-tool



Bocetos (sketching)

http://www.adaptivepath.com/ideas/d031009

http://www.smashingmagazine.com/2010/03/04/sketch-question

http://youtu.be/iVFTBj_BYy0http://www.grihotools.udl.cat/mpiua/bocetos-sketching


http://taehok.com/night/?page_id=64


Prototipo de papelEste tipo de prototipo se basa en la utilizacin de papel, tijeras, lpiz o instrumentos que se puedan utilizar para describir un diseo en un papel.

Este sistema nos permite una gran velocidad y flexibilidad.

Objetivono es probar o verificar la esttica del diseo, sino que se trata de verificar las ideas interactivas.

http://www.grihotools.udl.cat/mpiua/prototipos-de-papel-paper-prototypingTcnicas de Prototipado - GEInformtica, IPO20 / 83

Prototipo de papel

http://www.grihotools.udl.cat/mpiua/prototipos-de-papel-paper-prototypingTcnicas de Prototipado - GEInformtica, IPO21 / 83

www.paperprototyping.com

http://blogs.msdn.com/b/jensenh/archive/2006/01/06/510069.aspxbook reviewhttp://www.uxmatters.com/mt/archives/2006/05/book-review-paper-prototyping.phpwe continually iterate and improve based on our usability feedback loop


La tcnica del prototipado de papel consiste en dibujar en un papel, a diferentes niveles estticos, las interfaces que se van a probar y valorar.

Los diferentes estados de la interfaz se van dibujando en hojas separadas y mediante un proceso de ordenacin permite que el usuario final interacte con este material simulando el funcionamiento del sistema.

Prototipo de papel. Ejemplo Check-in hotelhttp://www.grihotools.udl.cat/mpiua/prototipos-de-papel-paper-prototypingTcnicas de Prototipado - GEInformtica, IPO23 / 83

Protipo de papel. Ejemplo Incidncies urbanes (IPO 12-13)


Windows Phone design process

1concept

3interaction

structure2

4visual

5http://dev.windowsphone.com/en-us/design/processTcnicas de Prototipado - GEInformtica, IPO25 / 83

Nos situaremos en un escenario de uso de futuro en el que el diseador acta como coordinador.

El prototipo ser analizado por un posible usuario que intentar realizar algunas de las tareas a disear.

En voz alta se irn realizando las interacciones y le iremos cambiando las hojas de papel en funcin de las interacciones que vaya realizando.Prototipo en papel. UsoTcnicas de Prototipado - GEInformtica, IPO26 / 83

Prototipo de papel. Ventajas (1/2)Los problemas (funcionales y de usabilidad) pueden ser descubiertos en una etapa muy temprana del proceso de diseo, antes de haberlos codificado.Favorece la comunicacin entre equipo de diseo/desarrollo, los usuarios y los implicados.Favorece tambin la participacin de todos los miembros de los equipos multidisciplinarios proporcionando un soporte comunicativo entre las diferentes disciplinas.Son muy rpidos de construir y refinar, lo cual permite realizar rpidas iteraciones de diseo. Los recursos consumidos son mnimos (materiales muy bsicos) y econmicos.Tcnicas de Prototipado - GEInformtica, IPO27 / 83

Prototipo de papel. Ventajas (2/2)Psicolgicamente es beneficioso para los usuarios: Resulta tan familiar para los usuarios que sin dudarlo intervienen en las modificaciones del diseo.El usuario, que es consciente de la facilidad y el bajo coste del prototipo, no se siente cohibido de proponer cualquier cambio.Resulta menos intimidante que un ordenador (ayuda a superar el fenmeno conocido como tecnofobia (Weil and Rosen, 1997).

El tiempo dedicado al proceso de codificacin es cero.

No estn sujetos a restricciones impuestas por la tecnologa arquitectura del sistema, la base de datos, el ancho de banda, el sistema operativo, y a pesar de ello ayuda al equipo a anticipar problemas y decisiones derivadas de la tecnologa


Prototipo de papel. InconvenientesPor su simplicidad, los prototipos de papel no sirven para realizar evaluaciones detalladas del diseo.

No puede simular la respuesta del sistema.

A la hora de evaluarlo es fcil que se den por supuestas cosas que realmente no estn en el prototipo.

La construccin de los prototipos de papel parece tan evidente que a menudo se menosprecian aspectos importantes como que el prototipo se asemeje al mximo en tamao y forma al dispositivo para el cual estamos realizando cuanto ms realista resulte el prototipo mejor ser el feedback de los usuarios el prototipo, lo cual suele llevar a rediseos posteriores que inutilizan los ya realizados. Tcnicas de Prototipado - GEInformtica, IPO29 / 83


Prototipo de papel

http://www.alistapart.com/articles/paperprototypingTcnicas de Prototipado - GEInformtica, IPO31 / 83

Prototipo de papel. Tools

http://www.gridbooks.ca

http://konigi.com/tools/overview

http://www.raincreativelab.com/paperbrowserhttp://www.henkwijnholds.com/files/concept7_a4_sketching_paper_v01.pdf

http://fullofdesign.com/uploads/iphone_notepad_vertical.pdf


Prototipo de papel. Uso.

Nielsen Norman Group Training Video: Paper Prototyping: A How-To Training Videohttp://www.nngroup.com/reports/prototyping

http://www.grihotools.udl.cat/mpiua/recursos


Prototipo de papel. Uso.

http://vimeo.com/20179865Tcnicas de Prototipado - GEInformtica, IPO34 / 83

Maquetas digitales detailled images

Las maquetas digitales son representaciones de calidad en formato digital que normalmente llenan el espacio que hay entre el prototipo de papel y la versin definitiva de una interfaz o parte ella.

http://www.grihotools.udl.cat/mpiua/maquetas-digitalesTcnicas de Prototipado - GEInformtica, IPO35 / 83

Maquetas digitales (detailled images)

http://taehok.com/night/?page_id=122Tcnicas de Prototipado - GEInformtica, IPO36 / 83

Mapa (o storyboard) navegacionalAlso WHITEBOARDINGhttp://www.grihotools.udl.cat/mpiua/mapastoryboard-navegacional-whiteboardingTcnicas de Prototipado - GEInformtica, IPO37 / 83

Mapa (o storyboard) navegacionalAlso WHITEBOARDINGhttp://www.grihotools.udl.cat/mpiua/mapastoryboard-navegacional-whiteboardingTcnicas de Prototipado - GEInformtica, IPO38 / 83

Font: http://blog.invisionapp.com/how-to-design-your-design-team



WireframesWireframes (o blueprints): gua visual que representa el esqueleto de las interfaces del sistema interactivo que estamos diseandocarece de caractersticas de detalle como el estilo tipogrfico, el color o los grficos:what a screen does, not what it looks likesuele iniciarse con un prototipo de baja fidelidad que fcilmente evoluciona hasta prototipos de (casi) alta fidelidadconecta la estructura de la arquitectura de la informacin a la superficie, o sea, al diseo visual de la interfaz

Ver ANEXO 1 del Documento Complementariohttp://www.grihotools.udl.cat/mpiua/wireframesTcnicas de Prototipado - GEInformtica, IPO41 / 83

WireframesSe centran en:El tipo de informacin que se muestraLa gama de funciones disponiblesLas prioridades de la informacin y las funcionalidadesLas forma de visualizar ciertos tipos de informacinEl efecto de representar diferentes escenarios de interaccin en la interfazTienen 3 objetivos simples, la clara presentacin de:Los grupos principales de informacinLa informacin del layout/estructuraLa visualizacin principal y la descripcin de las interacciones de la UI


Wireframes


Wireframes


Wireframes

Ver ANEXO 1 del Documento ComplementarioA detailed web page wireframeA digital skeletal wireframe

http://www.grihotools.udl.cat/mpiua/wireframesTcnicas de Prototipado - GEInformtica, IPO45 / 83

Sketching Wireframing

http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframeTcnicas de Prototipado - GEInformtica, IPO46 / 83

Wireframes. Links de intersThree stages of making wireframeshttps://medium.com/brandymints-blog/6e3a1c3f00ba

From Wireframes to CodePart 1: http://www.uxmatters.com/mt/archives/2010/12/from-wireframes-to-code-part-i.phpPart 2: http://www.uxmatters.com/mt/archives/2011/02/from-wireframes-to-code-part-ii.phpWordPress wireframes: http://wpdotorg.files.wordpress.com/2008/10/wf-dashboard_v002_093008jw.pdfWeb Site Wireframes Samples, Examples: http://www.fatpurple.com/2010/03/04/web-site-wireframes-samples-examples

http://wireframes.linowski.ca

Wireframe toolkit para hacer wireframes con powerpoint en el campus virtual


(some) Wireframing tools

https://moqups.com

http://uxpin.com

https://gomockingbird.com

http://www.invisionapp.comTcnicas de Prototipado - GEInformtica, IPO48 / 83

http://sixrevisions.com/user-experience-ux/wireframes-vs-prototypes-differenceIPO GEInformtica, curs 2014-154.-Tcniques de PrototipatToni Granollers.48

Mobile wireframing example

http://getlaunch.com


Mobile wireframing example

http://getlaunch.com



Responsive Design wireframing

FONT: http://support.balsamiq.com/customer/portal/articles/615901Tcnicas de Prototipado - GEInformtica, IPO52 / 83

Reflexiones sobre el trmino wireframehttp://www.torresburriel.com/weblog/2012/01/04/wireframes-y-prototiposhttp://olgacarreras.blogspot.com/2007/02/wireframes.htmlhttp://en.wikipedia.org/wiki/Website_wireframe#cite_note-brown_168-3


Prototipado incremental y evolutivo


Prototipado incremental y evolutivoStage 1: Framework Drawing

Stage 2: Framework Wireframing

Stage 3: Detailed Visual Design

http://fireworks.smashingmagazine.com/2013/01/11/ios-prototyping-adobe-fireworks-tap-part1Stage 4: Extending Fireworks To Create iOS Prototypes

http://unitid.nl/2011/03/touch-application-prototypes-tap-for-iphone-and-ipad-using-adobe-fireworksTcnicas de Prototipado - GEInformtica, IPO55 / 83

En mi caso, utilizo una tableta (wacom) para operar los distintos softwares por comodidad y precisin, y apenas la uso para dibujar. Pero sin duda, a la hora de hacer los primeros bocetos de cualquier proyecto, nada mejor que el papel. Personalmente, el hecho de abandonar la pantalla por unos momentos, estimula mucho ms el flujo de ideas y me siento menos cohibido a la hora de equivocarme. En definitiva, de eso se trata. Equivocarse mucho al principio para despus valorar, comparar y encarrilar el buen camino.Mucha gente es incapaz de ponerse en situacin con los prototipados. Ellos esperan ver un diseo acabado. Creo que ese es el motivo de por qu en muchos proyectos hay que empezar aportando prototipos que en realidad son propuestas de diseo. He visto esto en muchas ocasiones y siempre me ha sorprendido ver como la reunin de presentacin derivaba en comentarios sobre gustos de colores, y dems ... sin dedicar ni un minuto a cuestiones de funcionalidad y usabilidad. Luego, claro est, aparecan los problemas.En mi experiencia personal los prototipos de baja fidelidad me ayudaron mucho en la comunicacin y la colaboracin entres las diferentes personas del mismo equipo y tambin de otros equipos como lo de IT (casi siempre un equipo complicado en la comunicacin). Con estos prototipos consegu hacer partcipe estas personas en una fase muy temprana del proyecto, aadiendo los contrastes en una fase posterior y viendo disminuir los cambios en la fase final.

Marzo 201556 / 83

Prototipo de software

http://www.grihotools.udl.cat/mpiua/prototipos-softwareTcnicas de Prototipado - GEInformtica, IPO57 / 83

Prototipo de software. Vilars R.A.

iTunesBarcino 3DAjuntament de Barcelona, nov-2014Tcnicas de Prototipado - GEInformtica, IPO58 / 83

Prototipo de software. Ejemplo Incidncies urbanes (IPO 12-13)


A mi la herramienta me ha parecido muy til pues es muy facil prever con ella problemas en la interaccin con el usuario y "ver" cuando son necesarias pantallas de soporte (pantallas de error, mensajes despus de ejecutar una accin, pantallas que enlazan una funcin con otra...)

Por otro lado, aunque me ha resultado fcil de utilizar, si que creo que no es tan sencilla como invisionapp. Aunque no es necesario saber cdigo, si que lo es saber como funcionan las funciones de lgica bsica, por ejemplo para filtrar datos de los data masters.

Personalmente, me ha dejado alucinada. He disfrutado mucho aprendiendo el programa y viendo las inmensas posibilidades que tiene. Como inconveniente le veo que al presentarle un prototipo tan "realista" a un cliente es ms que probable que piense que el proyecto est prcticamente terminado, y eso puede ser un problema. An as... se trata de ir haciendo pedagoga ;)

Marzo 2015Tcnicas de Prototipado - GEInformtica, IPO60 / 83

Prototipado situacionalEscenariosLos escenarios no son propiamente prototipos, pero pueden considerarse en cuanto a que principalmente describen el contexto de uso

ElementosConfiguracin (setting)Agentes o actoresDiagrama de secuencia de acciones y eventos

TiposEscenario de tareasEs una descripcin del mundo del usuario tal como existe ahoraEscenario de futuroEs una descripcin del mundo del usuario en un futurohttp://www.grihotools.udl.cat/mpiua/escenariosTcnicas de Prototipado - GEInformtica, IPO61 / 83

EscenariosUna historia de ficcin con representacin de personajes, sucesos, productos y entornosAyuda al diseador a explorar ideas y las ramificaciones de decisiones de diseo en situaciones concretas.Es interesante pensar en diferentes escenarios para reflejar las diferentes situaciones y puntos de vista diferentes.

Scenarios good examples:http://www.uiaccess.com/accessucd/scenarios_eg.htmlTcnicas de Prototipado - GEInformtica, IPO62 / 83

http://infodesign.com.au/wp-content/uploads/Scenarios.pdfhttp://infodesign.com.au/usabilityresources/scenariosTcnicas de Prototipado - GEInformtica, IPO63 / 83

Escenario: uso de lenguaje naturalLas descripciones en lenguaje natural se realizan, cmo su nombre indica, mediante una narracin escrita de la situacin que queremos reflejar.

Este tipo de narraciones suelen ser las que mejor sirven para producir rpidamente escenarios que pueden ser probados por usuarios.

El principal problema es en la forma de describir la situacin.ya vimos que el uso del lenguaje natural puede dar lugar a interpretaciones errneas (Sutcliffe, 2002) o a descripciones demasiado largas que requieren demasiado esfuerzo por parte de los usuarios.


Escenarios & Casos de usoLos casos de uso describen escenarios (de uso del sistema) a partir de secuencias de interacciones entre el sistema y uno o ms actores, los cuales obtienen los resultados observables del sistema (el cual es considerado como una caja negra). En esta notacin los actores representan tanto a personas como otros sistemas que interactan con el sistema que se est describiendo (Scheneider , 1998).


Prototipado situacionalStoryboarding (un tipo de escenarios)


http://www.grihotools.udl.cat/mpiua/storyboarding

Ejemplo de storyboard actual y futuro

Storyboarding

http://taehok.com/night/?page_id=64http://www.grihotools.udl.cat/mpiua/storyboardingTcnicas de Prototipado - GEInformtica, IPO67 / 83

StoryboardingStoryboarding your ideas helps make them clear to everyone involved in the team. It lets you see where potential problems may arise and take action early in the process to solve those problems. It also helps to articulate the story you want to tell early in the project.http://www.grihotools.udl.cat/mpiua/storyboarding

https://www.interaction-design.org/ux-daily/483/ux-consistency-summary-and-a-final-tipTcnicas de Prototipado - GEInformtica, IPO68 / 83

Storyboarding (Hypothetical situation: User needs to Stop Auto-Refresh functionality )

http://www.grihotools.udl.cat/mpiua/storyboardingTcnicas de Prototipado - GEInformtica, IPO69 / 83

Rodar o grabar un vdeo permite desarrollar un escenario el cual gracias al uso de tcnicas de pre y de post-produccin pueden parecer reales funcionalidades y sistemas que solo son ideas, estn en fase muy inicial o son imposibles de realizar (tecnologa inexistente, lugares inalcanzables, futuro .

Prototipado situacionalVideoprototypinghttp://youtu.be/aL4QOmgzvakhttp://youtu.be/5WL2CwnYJHYhttp://www.grihotools.udl.cat/mpiua/el-video-como-prototipoTcnicas de Prototipado - GEInformtica, IPO70 / 83

VideoprototypingStarfire, Sun Microsystems: In 1992, Bruce Tognazzini launched a project at Sun Microsystems in an effort to both predict and guide the future of computing. It drew together the talents of more than 100 engineers, designers, futurists, and filmakers.

http://www.asktog.com/starfire/index.html

http://youtu.be/rESOIqRApFk2004futureTcnicas de Prototipado - GEInformtica, IPO71 / 83

72 / 83

what level fidelity to use in a projects design? The decision should be based on a cost-benefit analysis.

Budget. How much time and money do you have available?Project Phase. Are you in a project phase that requires detailed communication of a mature design?UI Interaction Complexity. Does the design have a complex interaction that needs to be shown rather than described?UI Workflow Complexity. Does the design traverse a complex workflow through which users can get lost?Responsive Design. Does your design need to respond fluidly to changing form factors?Audience Sophistication. Will your audience have difficulty understanding your designs?Tcnicas de Prototipado - GEInformtica, IPO73 / 83

http://usabilitygeek.com/when-to-prototype-when-to-wireframe-fidelity/IPO GEInformtica, curs 2014-154.-Tcniques de PrototipatToni Granollers.73

EjemplosThe Future of Self-Service Banking (BBVA, 2010): http://www.youtube.com/watch?v=x-DLQp9xb20&feature=relatedIKEA Concept Kitchen 2025: https://youtu.be/qD60cBQOABYThe Guardian iPad edition: 'Put the newspaper on the iPad: www.guardian.co.uk/media/gallery/2011/oct/13/guardian-ipad-edition-design-evolutionhttp://www.currybet.net/cbet_blog/2011/10/guardian-ipad-app.php

http://www.grihotools.udl.cat/mpiua/el-video-como-prototipoTcnicas de Prototipado - GEInformtica, IPO74 / 83

CONCLUSION: Prototyping pitfallsFocus on the Deliverable, not on the LearningToo Much Converging; Not Enough DivergingWorking in the Wrong FidelityToo Little EvaluatingFixating On A Single Prototyping Tool

BY JARED M. SPOOLhttps://www.uie.com/articles/pitfalls_prototypingTcnicas de Prototipado - GEInformtica, IPO75 / 83

CONCLUSION: The goal in prototying is not the artifact; its feedbakI recommend never using a prototype as the final GUI. This is not prototyping. It is development. A prototype is a mockup that serves to demonstrate some subset of the interactive behavior, contextual layout, and visual design. If a project needs to iterate on fully-developed versions of the GUI, then be sure that the team doing so is not UX designers creating prototypes, but a development team building the application.

[Garett Dworman, senior UX consultant, TecEd User Research and Designwith expertise in user research, information architecture, user-centered design and how people disseminate, access, and consume informationMarch 10, 2014 http://usabilitygeek.com/when-to-prototype-when-to-wireframe-fidelity]Artifact: its something you make as a way of communicating with other stakeholders (clients, other people on the design team users)Tcnicas de Prototipado - GEInformtica, IPO76 / 83

Resources18 Great Examples of Sketched UI Wireframes and Mockups10 Excellent Tools for Creating Web Design WireframesResponsive Web Design Templates and FrameworksFree Wireframing Kits, UI Design Kits, PDFs and ResourcesInterface Libraries 3: Wireframe Like a Professional

The iPad Web Design & Development Toolbox

Presentacin Prototipado (Cadius, 2009)


Herramientaswww.justinmind.com (http://www.justinmind.com/tutorials)www.axure.com

http://www.balsamiq.comhttp://www.microsoft.com/expression/products/SketchFlow_Overview.aspxhttp://www.invisionapp.comhttp://wireframes.linowski.caMS Visiohttp://imar.spaanjaars.com/535/sketch-and-prototype-tools-review-part-3-microsoft-office-visio-2010http://www.guuui.com/issues/02_07.phphttps://pidoco.com/enhttp://ixedit.comhttps://cacoo.comhttp://www.10screens.comhttp://www.mockuptiger.comhttp://www.fluidia.orghttp://www.omnigroup.com/products/omnigraffle (for Apple)https://gomockingbird.com/mockingbird (en navegador)

Listados:http://c2.com/cgi/wiki?GuiPrototypingTools


+ Herramientashttps://medium.com/@extremelyn/2014-the-year-of-design-tools-3c449d771e62FREEhttps://marvelapp.comhttp://www.invisionapp.comPuede servir para tomar los prototipos de papel (fotos) y aadirles la interactividadServira tambin como sustituto de MS Visio. Se disean las pantallas con alguna herramienta, se suben a un proyecto y es configura la interaccinwww.proto.io



Design Principles for Wireframing (& for prototyping in general)SET EXPECTATIONS - NOT JUST GOALSSTART WITH USERS - AND THEIR NEEDSTHINK HOW, NOT WHATSTART SIMPLE, STAY SIMPLEDONT CONFUSE CHANGE WITH IMPROVEMENTEVERYTHING HAS A MEANINGBE CONSISTENT, NOT UNIFORMLOW-FIDELITY DOESNT MEAN UNREALISTICEXPERIMENT & COLLABORATE QUICKLYYOUR DESIGNS WILL GET BUILT (a great design can be a terrible solution)SHIPPED IS BETTER THAN PERFECT

http://www.onextrapixel.com/2014/06/12/design-principles-for-wireframing/


Bibliografa bsica

Sketching User Experiences: Getting the Design Right and the Right Design Bill Buxton (2007)

Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Carolyn Snyder (2003)

http://www.effectiveprototyping.com

http://www.effectiveprototyping.com/ep_excel.shtmlhttp://www.effectiveprototyping.com/ep_swmakers.shtmlTcnicas de Prototipado - GEInformtica, IPO81 / 83

814.-Tcniques de PrototipatIPO GEInformtica, curs 2014-15Formaci GFT. Tcnicas de Prototipado [T. Granollers - 2012]

Documentos complementariosEvaluacin de herramientas para prototipado de sistemas interactivos. TFC ETIG 2010:http://www.recercat.cat/handle/2072/209099Tcnicas de Prototipado (documento complementario.pdf adjunto al final de estas transparencias)

Presentacin Olga CarrerasPrototipado: wireframes, mockups y prototipos:http://www.youtube.com/watch?v=vJrEbO50kxA&feature=youtu.be


LinksAgile approach to iPhone Design: papper prototyping+user testinghttp://www.slideshare.net/ginsburgdesign/an-agile-approach-to-iphone-design-paper-prototyping-user-testing?src=related_normal&rel=2289300

Visualizing the User Experience:http://www.slideshare.net/grantrobinson/visualising-the-user-experience-2261349

http://uxmovement.com/category/wireframeshttp://wireframes.linowski.ca

ESPECIALMENTErecomendadoTcnicas de Prototipado - GEInformtica, IPO83 / 83


El Curso de Interaccin Persona-Ordenador ha sido realizado por Toni Granollers bajo la licencia Creative Commons Reconocimiento-NoComercial 4.0 Internacional License.

El Factor Humano - GEInformtica, IPO84 / 110

IPO GEInformtica3.-Diseo Centrado en el Usuario. MPIu+aToni Granollers.84

`Zg-\WAYWBZ\F[]GYWB_XE]VDYRBe^L_ZG\YJ^XJ]VD_XF`ZJ_ZFa\H`[G_ZF\ZE[YD][F_\I^YE_XF`YG[XI[XIZWF^YCYYA]\G\ZCbÌd^N_WJ`XK`ZJ_YIb]Jd]J`WFbZGc]Ec[He\Kb[Ie^K`[E^YE_YK^XJf]N^YFb\L`YGd]Kd]Kc^J`[E`XCbZGaXIdZN`ZLaYLcZKd[Jb[I`ZJ\YHb]Je^Le\Ke^Lb[Ic\Jc\Jc]Gc]Gb\Fc[H`ZJ`]Je^L_XEe_Ie_Gd\Id[JcZKd[Jf^Kc]Ga[C`ZBbZEe]JaZGbZEeZHfZLe\Md[JaZG`YGaZG\V@aZHaZH`[Gb[Ha]B^Z?`ZB`XAf\Ci^JfÎc^J`YGaYFeZFg\Fh]IeZHcXD_YCa[E_YCbZCeZFdWF`TFaXG]VCg`Nd\Gf[GeZD`Y?c]EbZCa[C`XAbX?eYCcXDeXEdWDeXGfYHaYF_WDcXFcXF_WDÙCcVEcXB`Y=Ù?cXD`XC^S?aVD^VAaYB`XA\UB]VC\UB]UB`YFSN;JHNL?SOCSOFWUHOM>SQDTRESOCTPGQLFOJDTMERNEVQKXTKWTKNOGSLBUM@QOBNNDZVMSLBWPFRPCSUHNPCRSEOM@RNCUOCXRFRNEPOJUPJXQGTMCRNEPMFQNIURKOJDOKBRKCVKETKDSKHRMGMI@OK@PLAPKEQLFQJ@TKDTJHTJHRIBUKBYOFUNFTLIVOISLFNICIA>PICRI@KD:OH>QJ@OGPH;RH?RKCPLCJF;VMDQH?NEC?4NH8F;5H>5JA8LE=C6F?9HB6GA3HB4GA3F>3E>6H?8E>4HB6C8?:6@;5A:4C97>43>43>64>93@71?61?53=4/;4,>93=90A81;30941=84>50C9761+75):6+D:1?7,A:095,81+5.5CA4HG5JG8B>5GD;GD=GC@IG;QOCQMBSOFROHUQHXTIVOEUNFNJAURCPN?XVIYUIWTETRE[UIVPDUQEOM@QOBQMA[RMWLHULGTOKONIMNHONIPMFSNHPMHSRMOOCQQGOLEQLFULEVKESJESLDOK@PLANJ?PI?QJ@LH=NJAPI?JC9HD;NICHD9MK?IEID>JF=HF:HEB=7@A;IF?KF@EB9CC9AC8BD9DD:CC9HH>IF=JF;JF=IF?MJCGG=FF:FF:JJ@NFCNIEJG@KK?RPDNJ?QMDMJELLDMJENJAMI>MJCKGDHE@KKCHICFIBGI>IG8JH9BD7IK=KL>II?HH@IHCJJBIIALIBIF?OLCOK@MJAIJBIJDJKEGHCFEAKJELGCMHBKKCFI@EF>GH@FE@GD?E@5EB;CC;CC;CC;EB9DA8EE;IIAFCJG>IG;JH;HI;IG;II=DF9CE8DD:IFANKFDC?FGAEE=CC;EE=DE?HGBJE?FC41::/,=>,BA-FE3LJ;PMQO:TQ>WUFZTD`[HSR=UT?`YI[UE]ZIWVD[ZFWVAZXC]ZGZWF\ZKXUDXUDZTDYQDZTD\YH\VHWSGWVDWVDXS@WR?UR?UT@UTBTQ@VP@VP@URAVSDXTHWUIUSFUTBVS@VS@UR?TR=XUD[XIZS@^YEZXAXX@XUD\VF^WE_ZGWTA]ZGYVE\YJ^WE_XF`[H^YE\ZC[V@_ZD\WCZXA^\E\ZE^X@]WA^YE]\J[XG^YF^ZA[ZE`_J\WAb\F^XH_XF_YI^YE`[GaZH`[H`VJaXIc^KaZHd[LcZIc\JaZGb[I^XJc^Kh]Ib\F_XF`YId]M`ZJa^M^]Kc]Mb\Lc\LbYJa[M^XH`YGf_ObZMbZM`YI`ZJ`[Hb[He`Mb]Jc^Jb]Ie]FbZCc[Fh]Ke^Nd_Lf]L`YFa[Ec]Gd^Hd]KaZJ^YFa\Fc^Hc]Gc[HeZHfÎe_Ga[EdYGdYGaYF]VCb[Hd\Ic[FaYFe\MaXG_ZD^X@hcFc_Da[CdYCeYCg\Hg_JaZHf]LdYGg\Fd\Ed\Ed\IfÎb\Ff^Ge]FaZ@bX?eZDcZIjbOd\GbZCc[DeZDf[E`Y?d]Cc]Ed\Gc[Ff[Eg\FdWDeZDeZD`S@fYFd\I`WFbYHc[F_YAbZEcVC_W@`Y?_W@_WBaYF_VE`WF^WD_YA_YA]VC^WDÛD\UCaYFTONHPJPJ>OH>EE9FH;IJ:KILE;LD7KA7OFAPGBNE>JC9MD=LE?LE?MI>QI>WMCJ@7LE;NH:LF8PIAQNECC9HF:JC9LCJC=KD>E>8DA8FB6KB9KD;D?;G@8LF8LE;H?:F>E>8A=4JA2I@7C8D?9B>5B>3I@9D95G;;G=;B86C:5H?:G@8E=:D8=90=9.A;/D=5?74@85E;9C;8;60=9-A;/B:/@:,B>2XP=aXIbYJaXIaXIaYL`ZN`YI^WE^VC_XE`YF_ZGb[IbYJaXIaUEgZIdWFdWFaXI`XE^VA_TBaSF`SC]P?[P>^Q@WJ7VN9WO:WO.8;*WTEXUFYQDYRB[TDYT>US:TR;VSDWQC\RH]RLXOF\UEYRBXRBUP=US>UPXO>VO=XQ?WP>ZPD\TGVP@WOBXNDYOFSK@YQFXPCXQAWP@VNAXRDQK?SMATQ@URAPJ>SL:QL9QN;PM:MI>NJ?LF8MG7OI9NI6RM9PJ:[email protected]@0A:(%%TWNVYNRVHPVLNSMPUQMRLMPESVE76$EC6KDMI=NK4f]L\WCYVEe]Pb[I^[J_YKWN?>YVEWVDWTCXRDUQEXUFVSDTQBVSDUTBXUFZTHWQEUSFOPBYWJSQETPGWPFZTDWTAXUBXUDXRFVSDTQ>UT@UT@TN>XRDPQCQRBVUCURAWTEWVDVUCUTBTRCSQDUQETPDSQBRO>^TJXQAXRDSMARJ?VNCVSBQPTQ@SOCRO@PL@QK=PJNL=MOAJJ@MN@LOTN@UM@RI@QI>QK=SM=NH:KH7OM>RPAPMHJ?HJTQ@ZTHZTF[VCVS@UT@RSARSCURCXRDQO@RO@SK@VPDWTERPATPEXRFWTEUTBTN@UN>WP@YQDPM>QN?RO@SQDRNCUNDVPDNL?SQDURCTN>UOAWOBTM;TOOP>MKNL?NKLF6QN=MJ9

% # #" !&"%&%! $$"%" ! !"!%##'% )"#!#! +(+'12"+-)-/1#./45%;B1@C2@B4II=LLBRRFPQAZYG]\H_\IedO_aKfhRifStrcrq_zwd{xg}d~za|cf~eihqurtmrpvuxytwvqr~ozwsqtwqppppi|ik~h~h{ej~kzn}m{h~|e~|czx_{v`n~|e{{c|h}f~~f~}i{}h}l|j}lm|jmm~rr~nl~lmmoglkpqpmil~iijtq}fe}cj{ej}j{e~h~egl}igfj~ei~h~ilhnljl~s~uq}ju|q}mtoqroymv}tzlqzl~o|vj~xlvm|vj|vh|tgzqbwn_zqbznbrfXym_vo\tm[si_nfYpgXnfSoiYsm]slZjcSf_Of`TeaXe^Vd^Ra`N`_Ke^Nc\LjbOd\Ie^Kc^K^VIcVMg]Q`YIb\FgbLa\IhaQb[Ib\Pc]OjaPk_Oi]Mk]Pj\Og`NjcSg]Qg_Rf`Re]Ph^TmaUlcRleSgePhfMlgSgaQgaSdaPf^Qe]RkdTf_Lf]Lk_OofWmcWkbSg`MhbLjcQl`PshViaNh_NkbQnaPmaQjaRjcSjbKjbMldQjbMicKhaOiaTicSjeQleRjcQkdRmfSmgQmgOlgQheRjdXkeYfcPljSpkUkfRhcPjeRkeUfcRliVjhQhcPlcTpdTpdTkbQkdTlfXkhUkdRkeWifWpgVviYmfTqjWofWjcSlfVlfVmeRohUleSmfVohUmgOnhPnhPmhRlgQojVmfSnfOtlUvkWkhWoi[ndXofWphUphUmeNpjPmgQojVpiVofUoeYriZvkWuhWqhWkdRmkVnlWniVwn]pgVrjWwk[viYtgWtiWtlUoiQmgQul[ph[mgYohXsg[rfXvjZuiYzn^tkZph[sgYriZpiYrjSqjPojVohVlgTvm\xm[qiTnhRngTslZqjZriXohUljUnkZqjZpiWniUlgSojWph[pfZojWmmUllTrmYpiYmfVun\ngTtiWpeSuhWujXofUniVmhUniUoiSskTpkUmkVpkXogZpf\rh\skXqiTmePlgQmkRqkQoiQpkWlhOpiVnkZigXfeSmjWniVleUqjZqjXohUmhRjhQlgQleRldQjbOmfSidPa_JhcMjdNkeOlfNkcL_TBVK9GC&RL6OH5SN;ZTFc]OedRgiThfOqiRnjQniSqjWmgQhhPggOkiTkhUkiTpnWmhRmg[kcVmfTniUhgSjhYefTheVjiWniVmfSohUkfRmhTijZikVffNgfQihTihTihSjiWidQlfPqkUmj[ok_pjZlcTndXjcShcPidQkaUmcYne\ibXg`Vi`WgÛf`Re_Of]Lf_Od^NdbMb]Ic^Kb]J\VFb[K_YKZVK\ZM^\MZTFZPD[SH^WOVQKWTKXULZVK[TJZQJRI@\VFYVESQBUSFTNBZTDXQ?WMCYQDQN?SQDQRDQR@TSAURCUO?ZS@UN;QN;SP?UO?XQATL?XRFZSIVOETMCXRFSQDRSESQDURCRNBVRGUQEWSGXUFTQ>SP?SR@SR@RPDRPDVOEVPBYQDRJ=TLAXPEWOBXQ?SN8QP;PO=SMAURCRNBWPHUNDRO@YSEWP@SLON:UPROQN=VPBVO?QK;LI8IE9PKEOKBLI@KI=LH=+>=+ED0LK6GI3WVBTQ@UVD\aJZ`F^bGadI`dKipQosXikSqu\uy`pu^s{cw|evzcxze|}kp{n}otwytoknpywqpuww{o~~rz|op~}kvyf{~kvyfxygvucuxgt{kuyjvyhsvetxjvvjyvmusguvhstfrrhwrlvrixulssgxvj{ylvyfuxgsvetwdvwguwjvzkvxjwwk{xquumxzouxguvfywjwwkrvhrvhvxk~oyve{xg|yhyzhz}lvxkvynrtivrgtugxunspitqjuuirvenrctugvrgyujywjuvhvwiorgrujrtguuizzpyyossixyiywh{ylvwiwxjwwkwzoyzlwxjtueyzjuxgmobprguuislbvrgmmall`qobtpdtreomankbli`jg`nkfli`ng]icWle[jf]idê^VcZQgaU^\O^ZO`\Q`\QTTJY[P\ZN][N_]QWWMYVOZWPUPJ[WNYUI]YMUVFUVFVTE\YJ[XG]YMXTIYYM_`R[YJ^ZN^[L\YJ`ZL`[EYXC\]K\[I`[Hc\J`ZJ[YJ^\Pb[Qb\N^XJ^XJ\YH]\J[XG^XJb[Ka\H\YFZYD_^Ja^K`[E_ZD^\E^]I]^L^_Q[\L^`J__G_Î[]OXVG^\M\[I][L]\J_\I]ZG^XH`]Ja_J]ZG^[J^[J^[Ld\ObXLaYLa[Ka[KaÔ]\J]\J`_Jb_Lb]J]\H\]KZ]H\Ì^_M`^Q^_M]^N[\L`\P^ZNaÔ`]Na^M_\I_\I^\M`]N`\Pb\P^[J_\I

!&!

!!"!"$ !!#$!$ %(%(!!$"#'"'# +'$'&"%$"!$#!'"&%!'# !)&$! " $ ! !!"" $"$ !#!)#%+%%&"!! $#!)%$.%&( (""'!#'#"&%!%$ %$%&!&'"'("*)')%$($##" #"$ $% !" ! !"&")##" # "'$ !"%% #""% % ""! ' !# !! " "!$%!#"#'&!$ # ! # $"! " ! %$ "#%! ")## "%%! ' !$ "!"$ &$'$$$-+($'%)'41;8%:9%=MR>PXCUYHZ]LceWabTffZceZeh]jmbmmausdwvbsvcrubxyiuwjtvkyvmzxky{fvydv{e|nsugxzlwzos{prwpvynvzkpyhrzkryinucw{jryix|ntvkwzoxzoppdkqejremsiqtmqrjmmeilekngnoilmglohilchiaghceihkqglpbnpcfg_fkdfnchnbiqdlrhfl`hpegnggleophlkfqrmmojioekqejpdkqggodhnblodhkbglfgjcjn`lodhpehkbhicijd

" $#!#!"!$$$$$#!!#"! !"$ $ & $&$*$(($!%"&!'*$&'!%+%%'# )%"&"!&"!,'$($!)%"&!+'$"" +'$'&"#",)".+$)&*'",(%+(#,(,'!(% (( !"#$)%"*)%$# )$!)$!)#%%#&&!%*&%+&"(!)$'$)%"-)&51..*)3.(4-'5-*50-./*-/*(*',)$/,%,+&,)$*%!% $!"! $#$#!# %#$$#'# )%&'%($#('%%!",('1,(/'%)!$!"#" ! # "! !!# # " #"!## # " !! ! & " ! "##!" &$$&!! # !! !# !!! !# %#! ""!"# $ " !# !!"!" $ ##$ #,"+)0+0/.78&-/!6:)58%67)A?3??7BF7AH8@H9GMAJQAS[DPXAX]IY\GâLemVckVfm[dk[hl]ip`ktcep`grbgraludovfrvhsvkpxkowjrzku{ox~rnviw|uwytwzqkqcv|pqwksvksuhrtfqwigmclqjpsjmpeekafkdejc

" #!! !"" ! "! #"$#%$"! "" #" "!$ #$& "(!(#"('#(% '"&!+'&)%&'%&"""('%'# &!)"*!#

#!##( +!")$ *-#".&$+%!)##,!%-"&.(*-')-%#(+# &"'#$+'&1/0+*(-*#4/+4/,0-(/.)23-12,55-44*11)41*97+24'57,::2& ") %*$(+.)&*" ,'$)%"*$$) !-#$(% '$(""+"#-(%-(%& ("("&" ! !# !! " !! %! !! #"%'" $""!#$"" #""!$!! !# &$ !! !" #" !" #!"" $!&"!# #$! $"! ! !& """"

""!%!%!$%'%'(,, 15'+/ .2$14)A0DE7DE7JR=HP9IP@XZM\]MW[DR\AV_LTZNdhZ`gW_gXcn`^fY

" !! !! ! "#" ! $"#'#""!!!$#! "" !! "!%$"%! $ !"(""& "%##!'&")%"($!$$$$"#&"!### "!&'!'$#'$$i^bncgd^b\W]c]_]WWXTQUPMWOMMCANDEK@FA6>F7.%**%,+$,/&+.)#.'A;-H?0C@/IJ8RO>XS@^]HY[CbdNifSlfXnhZro\to[ztd}nmm~|mqu}~ptvtxvyuyzv}opq}n{n}ml~{j}ymsuuuszwf01#(*+,$,'!"! " !! #!$ " % !## ,$3]YPjdVZVKZZPikòpbpqcmi]vmdjaXmd]h]Wib\a^Y`]V]YPogd_US]SQXNL@;8F>;bXVVMNKFCE??:14FNPB\ZM\ZKa^MifUkcXoeYleUrh\ndZnaXvj^neVe]Peb[md__VO_XP^ZOZ[MWUFWN?B73=53,*+#$ ! ( $# #(#&+D>BGACJDDZPNÙSVNKXULb\N^VK]UJ^VKdWNm\UhUOYON\UOaXQaVPl]Vm^YZNNXORVLJ/'$'!! %!# # !!!# &!& " # $#&"#!$!#%!! !!"# ! "! ""#! !""&"!""$""! !# !%(!!# ""',3(9+!)/)-=8CG8;;,/4$'0+""&

% $|uy}tvxro\$ 4-%1)&,&&/*'(#(%+*&*)%+'&0'*1'($&!%'(# '# #("$#!&$)'>:;JHIpmhtpetpdsr`hjT_aKJL456$1/"0)0','!'"%!)%$& "!#!!"# $#!#%"!!"! '," "! !"!!"!"""!!# '"'"$"(!! "! "$ $#)$!( %$"$"# ""!$ $ !"% #$$#!""! (#'%#& !! #$!! !$ % !#$ "! &"#$! % "!$& !!'%# !! !!#! '##!"%%$ """$!# $ !"!$$ "!# !!"!&&"$.*!.(A,?-78&+*!$!#$ $# !&$""!"! !"&% '!!'*$&! $#"$!$" %"!&'!!$ # ""# "! ! $##%! (# +# '# $#$#!" !##!##!$ ' *" %#" $ (% !!"#')& !#%! % $%#$'# &% &%! $ !%#&%!"&!$ &"'&! "%&''(% &"$% &%#$$$'%&)%&(#)(#'%#$%!)%"*&%)$ ,'!-&%*#;4*IE9YWHcbPsqbsocTOL81+)%""'$('"(+"()!,+'.-+.,-*()("0D2>zyv{qwxrwn]wu{rktol{u{}{{uyw{yyxyy~vkxpeum`xoftkfqhc|umzwvxxywuywxttr|wtrvxyw{yyswyvwyxyyuvvyvsvs|l~pyi{pzy~~xxyz|cdR&'., 0-&+'$,('2/*+)+()&*)$&(#')&%%%($%1(!_\Siiaii]caRGE8,(%! # 1* &!?;8LHGJ@?MBLDB2-)/+,*+/'&" "! $% "!$*#!#.%(## #!$ "# !" ! &"'#$!!!"&!&!#%"'(#( %'$" '$$% "&!% "!%! %"! !!$# !#(!' '"# !"! "! !$#! ! '#"!! ! $(!!#&"" ! $" !# !#"# ""!"$ !! $" &!##""!""## ! !!""!#$"(%/,1.96#FD5OM@PQCabTklôm`rncuukwtkxqk}xrzvmwrnphekfbZUQDAEF4BA-;:&@?-:8)86!;:%[email protected]+*HL;_`Ra_Pa`N}zk{{ouwlbc]gb^5+,2),!!$% ! """ " !# ! & "&!F=B]URXTIQOB?B/ $# % ! !!"!!0**(# ! !$ !!!% % "!$!""" #% %$$!$%%&! ##"$"$# !"! !"$##""!$% $&!!#(* # "# %!&!%& &!""+& $!%")($! #!""#%$ (""& #" %$"*'"'&""#&'!&'!"#%$'# ($!&"&!#0&'.#)SLSb]Zli`jh\]^LUZDIN:65#'$)%-*!** -(")".*%$)%".)-*()'("&''*!$% +'&,'$&!'#"#)'*.((/%$,#$,('.)#*&,)".-+ !933_ZVYVM&"aQT|wrv|s}{oysifWjcYom^pn_ecT|xv~}zyzx{tvxww}xxz}{vuw|xy~{}~{ysvywv}~~z~~||}z||xz|}}|{~}{}|~}}geVha[nicigZ]\JVTEZXId^ReaXrneokbmjarrheg\gg]XMKUJFMD?.% !"##$#" #" !"'# ,'$"!+&"*"-%#%$'')(#$##")+ #$$#,(%+#!*%"+& *%,'!)& !""!$$$("#$"!!# '"" ! (#$# #"& %""!"%!"#'!!%!$ !# (!$ 87%@A/MO:nkZ|mvpduoawshmjaik^1.)!"'$(# &"#!#($ $!# $! % %)"'$ ###&"&"&" #"'$ "!&"!" &%$"$ $!! "$!'" !! $ &$ # # #%!# (# *!& & "&%!! ! !! "!!$ '!!(#*" "#""$&!# #"% (#&"%! !" !& "!!#"#"!"!$$ "$!%! # ! "! !! $# !$'!% $#"" !#! ! "!"$"!"#$# !! !# ## #&"!!!!!!" !!(# !#"!!!!# % $!! ""!!!!'# !#" %"!"$#$# ! !"('?>,GH6[\LgfTuqetnbundnjgc`[]XTQHI' '" $'$ ! !!# ! !

!5+6TMGYYMLO:7163.76177/561672952q+2.-/,%0-(0+'12*41*61+30'10+./*23-30+83/3.*12,45/52+10+*+#--%,,$)&!0+'2-)-+,4TAoi3736!50,.-(470/4-6470+/845:4642332.99146+47.67/77-MMEMJEMJCJIEMIFIFAFE@GG=OLCPLCNKDKFBPHFRIJOJFOLESPGOLGQLFNGAPMFJJ>LJ=NJAOJDSKHSLFRMINKFMJCQLFRKEPLCRKEOHBRMGJF=QMBRNCPNBRMIPLIQMJPOKQPKSSKPRGPPDTRFYULa\V[XQYYQWZQTTL[VP[VPLHE^_Zrsn{tlU`ZBZUAOP@WZQSSISQEQMBMJEGFBJIDGG?HJ?LLDKJFHJEHJ?II?OLCMJEONIOLGURMPMDNKBNKBOLCQNEOLCSOFTOIQNGMMERSKPMFKH?NJANL?KM?LODJMDTQJUQHWSHSTFSTFNPCURIQLFURKOOEQQEORGTTL\YRRRHWTMZUQUVQWVQYVOWTKYYM^^T`]V\\RZZR^^VYYO[[Q]ZQ[XOUUKSUHRRHONIMOJNOGJLAQTMQVPTWNWTOXUPUUMWWKVVLUUKZWNYRLUQHVTGVRIVQK[XS\YTZWRYVOYVMVTGSTFPREQTKLMGQQIVSLTQJURITQJYULUQHPQLWXSVUPUTOPSLPQISSGURAbÌd~jlaGIFIHFQMJONJOPKONITPGPPDOQDOPBNNDVVLRTIUWJVXMTVISWIOWJW[MVXJQSEVXMVXKVYHW[MWXPZ[SZ\QVXJVXJXXNYYQTRFRPASTFSVKSYMMSEFNARUJUUKPPFTQHTPGQNEUUITTHUVH][O^[T[ZUXXNXUNZWP[ZVVWOZ\OZ\OWWKIM?tpSHVQORUTRUTOQQIOPKQSNRSKSSIXZORUJRULTUMPQISTNQTMIPHMSIRTISSKNQHLODNRCOSDOQFRSMQRLTUMVWOVWRQRLSTLTTJTQHRRHSVKTVKUYJLMEVWQTUOQRJQSHQQGPSHSTLOPJNOGOOGNOIMPIHMGGIDLIDMLGNSLIOEMMCNOJMNFNOGMMELLDKKAFH=GHBIJBII?HICEGBJIE# #" ($#'$$### $##$ &% "%"$!):LCx+231$30)0,)2-'01)00(30'33'57,12*10,51.83052-02'03*/.*3/,0/+/+(0,+0+'3,$1-$-)(5]Hqf)/58'82263.43/333779726;555127265427:345/43.65044*::243.=965//;63:52;6285076167/25,79434/77576243/512+ .3 @AD%6GG;HF:NNF@?;HE>LGALGCJFGJIGKKIMLJLLBMMCMJAQLHOLEMMCOOEVRGQOCNNDQTILNCRPDPLAQNEMMCPQIKLFMLGPMFTQHRSEPTFLODPPHVRIWUIURIQRDRTITUOUUMXUNVRIZVMSSGRTGVVL^^T][O_]P__U_\SVVN\]UWYNYZRYYQ]ZQXTKYVMPQKMNHLMGRRJNNBQTKORGYYMVRFWUHQSERTGVXMTVHVXJWTOPPHURIVSLXUNZWP[XO\YR\WQ]YPYRJSPGLOFJOHPQIWTMWWMWTKTTJSUJVVLTTJTUMTTJVVLQTIRSMTSOZWRZWRWTMXTKTRFfhZ~p~uZQL@rqODRSSQVWQXXNSSINMHWVQUUKTVISYMMSIWZSZWPRQLMLHOOMNQJPQIPQIQPKOOEFH=ILALRDPVJLOHQSNUWLRSKPQLPQITTLRQLQRLRUNTVKVVLSUHQTIOPHSTNSRMSVMSVKORIQTKQTKPQIRRHLNCMPGQRJKLDKKCOOGJLAOSELN@KLFLKGLMHMNHNNFPMDIF=JKFJKEHIAHJ?EF@IJD(!(# ! # $#!&%##" '#$)#'("$($##"###!*:B>;C?>=;?B>;D?;B:7C@;CB=>=8@?;=@7?B9BC=B?6FC:@@4CA45*H91H:5I=>998498454052+66.44,55-36+06,45-66.34/01,9;625*56.761761>@>?CB@=?:8=7444999320540540572/32764000132568685671553220553/1./1.45/45/-,'/.,12411/32-57,/4-,50070043/1.35003,02/02-01,11//40)0(/6.-/*.1*/0*01+43/22*13()%&($%*&%)%"(( %& #$#$&(',##%"""$$&!#$""$%$"'&"$ %#$%$ %!"'"&$"''%('("$' %(!!"&$% "&&&%$!"!# #$&'&$$ !)%&&&(!#"$$"&%!()$'(*(*)&&$&(%')(%'&$##!%$ %$"! *)$ &&&'%'$&&($#)(+"&'!&%!,,*'(#'&"($#)($,+)+*((&'&&&(*%',%"' $)"$&!&%!.+&/,'/+(1()/)-*)/*+/*()+*(,(%+(#*%-)(*(-*()**"$&$((+"*-&(+$%(!(*'**(&+'')&+*&,-'(+$')&****(+-+,.)&-'')%$+-*/,'1)&0+(+*(--+-.)*)%,(%,-(('#*)$/.***($$")(&-,(-,*+,',-(,+)/+,2.//+*/.*/.,00.*+&+*&,(%/&'.)&/*'1-,-,**)%0,)-+,((&***/-0//-,+&-*%-,*,,*+*&/+(/+*4/+30)..$//',+&,,**+&0/*3/,0,)11)//%-.&,-(23.540;74764;7487325.6907:31305725;6:7?B;58168335054/44,77/33'25,06,69233+/2+.1*06,36/442:67732:9465024/796@?=>?98>47:155302124300.12-24/-10.,11.555533142398456155512413214-14)00(850540-/.35424136/05.,1+05.46500.67101)22014-14+-2,,2.)3+,3,).(*/)13.34.63,63,63,)%&'#$) %& ""#!#%'$$$"$$&!#$%$!!!#% #"$#'%*)$+(&+&'"&&$#$"%'%()))%&(')( +'$((&'''###$&%#% #% %'&"#'!#"##!('%%$"$"#$#!%& %&!!$&!$% &&$&&$((*'''&&$$$"$$",(%.+(!(( )*$)&!,$!-''-').)&-($.+$**"#$%&&')&)&!#"+*(*&'*+,'*+&)($+*&50,.)&.)&+),0./,*-%%%*)''%&.+&,,$)*$+,&++)*()*)'%$ ')$))'('#'("()#+*&++))+**,+')&((&,+)2.-/*.)&-)'***")(#('%$$$3--5,-/+*(((***')&%*$(-)*-&-0),-(+-(+,&+*&758'#$)))+-*,+'.,-'&++),2,,0,+.*'22(//%,,$)(#/+*1.).+"1.'2.+.*'10+),%)*%++),,,)+(*,'++)/-00,-*()-+,///,+)2.+/,#//#*+%+-*%*#02'22*02/18101)22(34.444845830:5187278356167189489413.3955:67969:5@=695762683;83983ROHKNEINGKPJNVKQYJW]OdgVdgTjmZijZuwj~uvvust~nkzV{rQnB{HNRatlkqphpo{y{xvonljijjoudb^VZ\[UVN|JvAo:p@wO}}xuoo~nw{ot|qxkxhsctgvj~oh~mf}le{md{ovj^riyiiufcviasiòf]slbribh`]ogdsjergela_j^^ka`h^\j^`qbeqadnbdf[_laglbci_`h]cj^beY[mcamd_k__nbblc\d_[c`[d_[i^\qfbdYWj\[k`\g\Vh_Xi_^g_\d]UkbYhaYjc[haWkcXkbYgaUeaVhc_ib\jaZmd]f_Wh_Vg`VfbYidîeZgcWfbWhbVjbUhaQg`Pd^NjdVgdUkeUlh\c_Vfa[le]ibXc_SgcZle[keWe_QecVieYebSeaUnh\icUjdVb^RgcXhdYhbTlbXkbYhdYecVgcWgdUkhWheVqk]lfXliXijssoptwrwytx||{zyzxw{z{|xxz||z}xdtr]piWtlWxq^xs`wr\vo\vo]tm[ro^tq`snZuoYuo_vnavnark[vo]un[ys[wp]ysezscwp`wp`yscuo_xq_xo^rl^pj\tn`ro`pm^qmauocxpcukarj]xnbtjatl_sjYrmZpmZomXsn[qlYol[to\up]to\to\qoZrpYvn[xl\pm^socwqexrdrl\un\rmZpo[pnUsmWun[to[wr^wr^ro^qnernbqk]sl\tl_sk`tl_zn`ypasl\vm^vn[tnXwpûm`yqdxo`tk\qjXpj\qi^xkbph[nhXqk[tl_tm[un\tm]oiYpj\rlûoatnûn\tlYslYyròfUmeRniUmhTmgWihVidNjdLnhNidNkcVnf[pj\liX|vhnfYvo_xh~{j}zimvxz~#%"#% $% #($#*#&-($''%)%$*&''&$)))&&&$$"#"%$"((&')$('")'('')(*''*#&) &)&)"$#'& )$&(#()!''&%!&&&%%#((&++)(&',+)%$ %$ +'&*$$*'&$''%)*%-,*+*()*%)+(')&'%&.*)('#()#'( '( ('#+'&.-($% **(.)/.,1,*/'&!,+'0/-(&'*)'()$-,(/+(1-,0,++,'+*(-,*,,*+,'11)1.'/,%--%/0(,-%.-(.-(-,'+(#,+&*+&*+%+*%//-,,*,-(2/*2/*,(%-,(-+,1-..-).+$30'52)63,0/*./'//%0/*21,1.)30+11)0/*7133,372632065033)23+43.21,74-96196199157,89156.24&35(95880:94=D:9G99G96@1,@1*B4+HDHBFE?CCEP@JP@JRELH;BJABLCDMEBIA?I@CMBHH=AE:@LAGF=BLAEMDEKBCE@=JDFJEBLDBKABJB@IA?OGD@91NG?I@9MB>HC@EA>IFAFCMD?MF>RKCNGAMF@PHELGCMHDLIBLIBMHBQLFOJDLH?KDOF=OF?QJDOGDQIFNGAPI?UNDUNFULGOF?SJASLDRKEVMD]TKYSGQI?D=DHBDGACGAEC=AG>CH?DEI?=J@?LA?J>>FH@=JB?J@>KABJ@ALB@KA@KA?I?=GBQHAOFANE@SJEQJBNICHH@MJCNE@QH?RNBQK?QK=UOARJ?RI@RKCTLI\QKWMDQNEROHURKQMDWTEVRFTPEXQI[TNSLDYRH^WO\UK^VK]UJaYL]WK\XL^ZN\ZKZYG^]K][L_]P_[O`ZLe[QbZMc\Ld]Me]Pd\Ob\Lb`Kd_Lg`Nc\Jc]M_]N_]N`ZLf]NgÔc[Nc\Lc[Nf_UfbVb`Sb^Rf`Rd]Sf`RhbRgaSb`SgdUicSfaNgbNmgWf`TiaVicUleSmfSlgSgePidPjeRndZiaVhaWf`PecNedRcdVecVlfXmfVkcVnfYicShbRlgTlgSkfRngTohVleUkdTojWmhTkbQqeWvl`ph[niVojVqlYnhZqk]nj^miôg\riZriZmgYqk[ohVsjYohVqjXsn[rmZrmZqjXumZwjYzo[tmZpjZnhXrmZpmZqobskûnûn[pnYmkVpmZvnaro^po]pm\un^to\tqôjVvo\un[vo_yqfzscvo]yr`xqawobzqb{tdtn^zsa{u_zsatn^ysczuaxs_yr_xt[yu\yt^vsbtq^|x_~v_zr[ya|wayw`zxaupZ~kyr_zs`{hyc}y`zv]{tathsg~th~wg~wd}wa}wa|wdzg|wcyc|ubvo]|ubyf}h|zc~ye~yc~yc|c}g~wd{hyf|f{a|fzf|f{azc~xb|{g}zg|i{izjzj{jzh~nzhxf|g|fyhyg~ii~j|i~n{k|lm{h|l|l}jko|i|k{l|k}g}f}ehghjzh|j~j|i{emll~o~n~l~lxf|n|n~n|iizgzh~k~m{jyh|jzg|iziykyj{k~nn~mxgmsq}musysz}esuhZT:1A=2A=1A?0D@7A3EA5EC7A>7B?8FB9E>8B>3D@4FB7DA8HA9>5.C6HA;F=6G=4G>5JF;EC7HC=KF@F?9OECOFAJC9HD;JJ>HF9GE6NJ?MI=NKFB6LHWQCVPDSMAVPBWQAYTAWQAVPBYSCWQAZSCZSCYRBXPEWQETOISPKQNGPPFTQHRNCVRFSMAUNDWNEWNEUSFURCVRGTQJPMDOM@UQEMG;YSGTSAMNRNBOM@RPCMI@QMARQ?QO@QOBTPDWOBYPAXPESLBTREWQAYR@WQAWTESR@QP>RO>WP@XPCVPBWTCYSCXS@VQ>YSEWQCXRDXPE[RC[RAÛFZTFTPGURKSSIVRGTPETPDXRFXQGXQGXQGYRHWUFVT?WTCTPDYUIVSD[UGYQDYSGYVEWTC[UGZTFXUFWR?YSCXRFXQGXPEXRFXUFWXHQRDTPDWQCXTHVRGWSHXTIUOAURAVUAUVDVTHWSHVRGYSE[SHYPGZSKYVG]ZIYVCYWJSQE[WN_VOZQJ^XLZTF\TIWPFUQF[TJ\UKWUHWUFZVMYTN\VJZUBXUB\YF_VGURCXTH_YK^VK`WH_VG^VI_XN]VN^WM_YIXUFXVI]WI\SB`WHbZM]VDZU?[YB_ZFZWFXTH\XMb\L`[G]VFaYLaYL[SF[UE[XI^ZN[WL][O^ZN[YL][L[XG\VF_WJ^VK]ZKaÔc]O`XK_WJc]O^[LZXI[ZHZWHZXK^ZO_YM_YI[ZF_ZGbZMcXReZXeZTdYSaXOaWMaWKd\O`\P`]N^ZOa]R`Ôa]Qc_Se_Qd^Pg`Pb[He^Ld]Mb_L`]J^\M\XLa[Me`MgaQd\ObZMd\Od\Qb\P`[H_ZG`ZJa^M_\Kc]OaYLfZNf]Ne]PdaPfcTgaQi_Ug_Te]Pe]Pe\Ke\MkdThaQf_LjcQg`Nh^Rk\Uk_Sc\LjcSibPd[Jc\L_XFh_NdXLaXI]UJ_WJbYHd]M^XHaZH]XEa\Ia\Hb[Hg_LfaMedOebOmfSgbNhcPkhWxs`ytayt`}jpp~l{y|z~q{|gjaPUI=F=4jhYqn[mhU;4,M[Bt

5. Prototipado

Education

Transcript of 5. Prototipado