Tres punts diversos

Formalitzant mitjançant Use Cases –Casos d’Ús: el cas de l’ajuda (HELP)Formalitzant mitjançant Design Patterns – Patrons de Disseny: el cas d’un Portal webEines d’implementació d’interfícies: una petita guia introductòria

HELP!

Dissenyant l’ajuda des d’un punt de vista més formal

Esquema bàsic de cas d’ús

Notes d’implementació: (donar unes quantes)

Exemple: (o sketch)

Denominació del casCas d’ús

Què vol l’usuariPregunta del’usuari

Què ha de fer el sistemaQuè fa l’usuari

SistemaUsuari

Use Case (Cas d’ús) I

Notes d’implementació: Pop-ups, ajuda contextual; disponible per a tot

Buscar_IdentificacióCas d’ús

Què és això?Pregunta del’usuari

Descripció breuIndica objecte

SistemaUsuari

Exemple

Alt + F1

Pop-up Ajuda contextual

Use Case (Cas d’ús) II

Notes d’implementació: Possible demo o visita guiada

Buscar_InstruccióCas d’ús

Com faig...?Pregunta del’usuari

Successió d’operacionsIdentifica tasca

SistemaUsuari

Exemple

Use Case (Cas d’ús) III

Notes d’implementació: “Veure també ...“ “Temes relacionats”; taula de continguts rarament útil

Explorant_CaracterístiquesCas d’ús

Què puc fer...?Pregunta de l’usuari

Vista general, mapa de temesSol.licitud

SistemaUsuari

Exemple

Use Case (Cas d’ús) IV

Notes d’implementació: Sovint primera etapa, o següent etapa

Buscar_SuggerimentCas d’ús

Què hauria de fer?Pregunta del’usuari

PistaSol.licitud

SistemaUsuari

Use Case (Cas d’ús) V

Notes d’implementació: No donar massa detalls, l’usuari està confús

Buscar_ClarificacióCas d’ús

Què vols dir?Pregunta del’usuari

Explicació alternativaSol.licitud

SistemaUsuari

Use Case (Cas d’ús) VI

Buscar_ElaboracióCas d’ús

Recorda’m sobre ...Pregunta del’usuari

Sinopsi del temaIdentificar tasca / característica

SistemaUsuari

Use Case (Cas d’ús) VII

Notes d’implementació: Utilitzar mapa o animació

Buscar_LocalitzacióCas d’ús

On és ...?Pregunta del’usuari

Donar lloc, o camíIdentificar característica

SistemaUsuari

Patrons de disseny

Alternativa a les directrius, orientacions

Introducció

Motivació:Intentar reutilitzar el coneixement sobre dissenys que se sap que funcionenSuperar la dificultat de saber com s’han fet les coses anteriormentSuperar la dificultat de reutilitzar solucions específiques

Utilitzats per primera vegada en arquitectura, per a comunicar problemes de disseny i solucionsNi massa generals, ni massa específicsUtilitzats després en Enginyeria de SoftwareForma de codificar el coneixement sobre disseny

ReferènciaThe Design of Sites, Doug van Duyne, James Landay, & Jason HongPatrons dividits en grups

fiabilitat & credibilitatcompleció de tasqueslayouts de pàginesbúsquedanavegacióllocs ràpids

gèneresmarc navegacionalhomesproducció i gestió de contingutse-commerce bàsic e-commerce avançat

A pattern approach to interaction design, J.Borchers, John Wiley & Sons, 2001

Format dels patrons

1. Títol2. Informació d’antecedents3. Enunciat del problema4. Solució (solucions)5. Esquema de la solució6. Altres patrons a considerar

PORTAL: problema i background

Problemasense una bona home, ningú visitarà la resta del webles investigacions mostren que milions de visitants marxen després de veure la home (i la majoria no tornaran mai)

Problema:la home és portal d’entrada i aparadorha de seduir els visitantshi ha molts aspectes a considerar (imatge de marca, donar molta informació, ...)

Algunes regles de disseny

Amplitud a l’esquerraCentre i dreta per a remarcar articles d’interès generalLinks clarsSubseccions a la part inferior, que donen més detall

Solucions per a una bona Home (I)

Focus en un únic tema d’interès

crear una PRIMERA LECTURA CLARA

• dirigir l’ull a un únic ítem gràfic

fer-ho net i més gros que la resta de la pàginareduir a molt pocs la resta d’elements

Solucions per a una bona Home (II)

Promoure la “marca” del sitepresentar el missatge del que fa la companyiaincloure

• PROPOSTA DE VALOR PROMINENT• promesa als visitants

• links a LA POLÍTICA DE PRIVACITAT per a reforçar confiança

Solucions per a una bona Home (III)

Fer la navegació fàcil d’utilitzar

comprensió immediata per a experts i novellsutilitzar MÚLTIPLES FORMES DE NAVEGAR

• característiques bàsiques com LINKS EMPOTRATS

• BARRES DE NAVEGACIÓ• diferents tipus

• Utilitza la POTENCIA D’HTML• Fons de taules de color per

a subratllar seccions • IMATGES REUTILITZABLES per

a subratllar coses noves

Solucions per a una bona Home (IV)

Encisar els visitants per a que tornin

amb contingut fresc• actualització freqüent

per a motivar el tornar

seduint amb text• en pocs segons

• viu, brillant, precís

ResumintEls patrons de disseny ens permeten reutilitzar

coneixement de disseny

Prèviament utilitzats aarquitectura i a Enginyeria de Software

Els patrons de disseny tenen una estructuraExemple per a disseny Web

problema (i antecedents)• si el portal no és bo els usuaris no tornen

solucions (i sketch)• focus en un únic tema• promoure la “marca” del site• fer la navegació fàcil• encisar els visitants per a que tornin … (i més)

Eines de programació d’interfícies

Una (molt breu) introducció

Eines per a entorn web (I)

Editors HTML genèricsMacromedia Dreamweaver, Macromedia Home Site, Microsoft FrontPage, HotMetal, Arachnophilia... Combinen HTML i JavascriptEditors específic JavaScript: JavaScript editor, Developer's JavaScript editor...

Editors CSS (Cascade Style Sheets - Fulles d'estils):

permeten donar un estil general a tot un siteforma d’independitzar contingut i presentacióSimpleCSS, Style Master 4.0...

Eines per a entorn web (II)

XML (eXtensible Markup Language), XSL (eXtensible Style Language) i XSLT (XSL Transformations ):

forma més avançada de separar contingut (en XML) i presentació (utilitzant XSL i XSLT);permeten tenir diferents sortides (web, e-mail, mòbil, ...)XML Spy, XMetaL; Netbeans i Eclipse també son editors d'XML i XSLT...

Flash, Photoshop/Gimp,... eines per a finalitats específiques:

Photoshop/Gimp per a prototipar, i per a elements de les interfícies;Flash per a interfícies molt interactives i flexibles

Entorn web i altres entorns

Per a entorn web és important tenir en compte les pàgines web dinàmiques, i les eines apropiades (JSP, ASP, ...)Llenguatges abstractes de representació d'interfícies: XIML, UIML, XUL, ...

permeten una abstracció més gran de la interfície, de forma que pugui ser multi-plataforma, multi-dispositiu, ...; hi ha encara poques eines que els hi donin suport

Toolkits (I)

Toolkits són eines per a programació d’interfícies

normalment formades per un conjunt de classes que es poden re-utilitzartenen un conjunt d’elements de la interfície gràfica (widgets)promouen un look and feel semblant per a les interfícies

Swing és una toolkit per a programació d’interfícies basada en JAVA

modernitza una toolkit anterior, AWT

Toolkits (II)

Windows Forms .NET és una eina semblant a SWING per a entorn Windows; relacionada amb .NET, fonamentalment amb C++; també utilitzable amb Visual Basic, o C#Als entorns Linux GTK és una toolkit molt utilitzadaQt Designer és una eina basada en C++ que permet crear interfícies multiplataforma(cosa que Microsoft Visual C++ no permet)

IDE i altres eines rellevants

IDE (Integrated Development Environments) són entorns de desenvolupament que contenen també eines per a programació d’interfícies

Netbeans, Eclipse, Microsoft Visual Basic i Microsoft Visual C++ són alguns dels més utilitzats actualment; Glade és un IDE que treballa amb GTK (http://glade.gnome.org/)

APPForge for Visual Basic, Codewarrior for Palm, .NET Embedded Tools, J2ME Windowssón exemples d’eines per a entorns de dispositius mòbils

http://www.etse.urv.es/EngInf/assig/dig/practiques