GanttProject: eina per a la Gestió de Projectes

En una anterior entrada d'apunts digitals ja es va comentar, el camir a seguir en un projecte de disseny web ens l'indica la metodologia. Aquesta metodologia cal seguir-la a l'hora de realitzar un projecte web.

La Gestió de Projectes és la disciplina de la planificació, l'organització i el control de recursos amb el propòsit d'assolir un o varis objectius. Cal tenir en compte que en tot projecte, sigui de la naturalesa que sigui, intervenen tres tipus de recursos: tècnics, econòmics i humans.

Grant Project és una eina d'escriptori multi plataforma per a la planificació i gestió de projectes. Es pot descarregar gratuïtament i és força intuïtiva d'utilitzar. A l'hora de la instal·lació et detecta l'idioma predeterminat que tinguis instal·lat en el teu ordinador i disposa de la versió en català.

Exemple de diagrama de Gantt

Aquesta eina ens permet realitzar un diagrama de gantt, un gràfic que ens mostra el temps de dedicació de diferents tasques o activitats al llarg d’un període de temps total determinat. També indica la relacions existents entre les activitats i els recursos assignats per a cada tasca.

Web Colour Data: Quins colors utilitza un lloc web?

Ja s'ha comentat en una anterior entrada d'apunts digitals que el color és un factor important en el disseny web. A vegades es fa difícil poder trobar una bona combinació o poder saber quina és la paleta exacta d'una pàgina web que ens agrada o ens sembla interessant.

Web Colour Data és una eina que ens permet analitzar els color que utilitza una pàgina web a partir d'introduir la seva URL. Es molt interessant poder veure les paletes de diferents webs i així poder fer un treball d'investigació de colors corporatius web o fer comparacions. A la pàgina d'inici se'ns mostres alguns exemples de webs (Facebook, Google, Yahoo, Flickr, Firefox, Dropbox o Instagram) que ens poden servir de referencia.

Web Color Data del Blog Apunts Digitals

Infografia twitter Apunts Digitals

Una infografia és una representació visual per explicar algun tema o concepte. En una infografia intervenen descripcions, narracions i relacions presentades d’una manera gràfica i normalment figurativa.

Tot i que presenten la informació d’una forma sintètica i esquematitzada, les infografies són un dels recursos més utilitzats per a presentar la informació per la seva claredat visual. Una infografia també pot ser utilitzat com un recurs educatiu per explicar conceptes.

A mode d’exemple  us presento una eina molt senzilla, TweetTopic Explorer , que genera una infografia interactiva d’un perfil Twitter sobre les paraules o tòpics més utilitzats en el compte que s’analitza. En un instant es pot saber de que parla el compte mitjançant la presentació de les etiquetes per ordre de rellevància. El seu funcionament és molt sencill i només cal indicar el compte a analitzar.

A mode d’exemple aquí teniu la infografia resultant del meu compte de Twitter realitzada amb l’eina Tweet Topic Explorer.

Infografia Apunts Digitals

PowToon: eina per a crear vídeos

Segur que tots vosaltres heu pogut mirar molts vídeos animats per a explicar temes o conceptes d’una manera molt didàctica.

PowToon és una eina per a crear vídeos i presentacions animades d’una manera gràfica i animada. És una eina gratuïta i us permet de poder penjar els vídeos, per exemple a YouTube per tal de compartir-los amb els vostres amics, els vostres estudiants i fins i tot per a fer presentacions professionals.

Us passo un enllaç d’un vídeo fet amb aquesta eina d’un dels blogs que segueixo Mi experiencia de usuario on s’explica com crear “persones”, mètode que ja vaig comentar en un post anterior d’apunts digitals.

Eina PowToon

Color Scheme Designer: tria colors disseny web

Un dels temes més complicats a l'hora de dissenyar una pàgina web és la tria de colors. La combinació de colors d'un lloc web ajuda a donar forma a la seva identitat i per tant no ha de ser descuidada ni improvisada.

Però, com poder fer una bona tria de colors? Una de les possibilitats és utilitzar eines especialitzades que ens poden ajudar a fer aquesta tria. 

Color Scheme Designer és una eina online gratuïta i molt fàcil d'utilitzar que ens ajuda a crear esquemes de colors en segons, fer simulacions d'un prototipus de pàgina web amb els colors triats, fer simulacions per a persones amb dificultats visuals i exportar el contingut a codi HTML  per a poder reproduir tant la gama de colors com el seu indicatiu de color en el navegador.

Pantalla inicial Color Shema Designer

Gama de colors resultant

Espero que us agradi aquesta eina presentada per apunts digitals.

Mockflow: prototipus disseny web

Com s’ha comentat en una entrada anterior d'apunts digitals, una de les fases de la metodologia web és el disseny. Poder realitzar un prototipus del lloc web que es vol desenvolupar ens ajuda a poder tenir una idea de com serà l’aspecte de cadascuna de les pàgines que integraran un lloc web. El prototipus en arquitectura de la informació és la maqueta del projecte a realitzar.

MockFlow WireframePro és una eina basada en web per dissenyar models d'interfície d'usuari per als llocs web. Aquesta eina gratuita ens ajuda a visualitzar la interfície de la pàgina web, la seva navegació i l'estructura en poc temps. És una eina fàcil d'utilitzar que ens permet dissenyar, d'una manera ràpida i intuitiva, cadascuna de les pàgines que conformaran el nostre lloc web, implementant una arquitectura web molt personalitzada i amb diversos complements que t'ajuden a realitzar el prototipat.

Prototipus bàsic amb MockFlow

Notegraphy: app de disseny

Avui parlaré d’una aplicació anomenada Notegraphy que he vist publicada en un dels blogs que segueixo: Academic App. Aquesta aplicació ens ajuda a millorar el disseny de les nostres publicacions per poder-les compartir a de forma més destacada a les xarxes socials.

Notegraphy replanteja la forma d'escriure i compartir text en línia a través d'unes plantilles, així que es poden crear dissenys més originals en temps real, i compartir-los a l'instant a Facebook , Instagram , Twitter i WhatsApp : una entrada de blog, un text o simplement alguna cosa que es vulgui dir i compartir.

Aquí teniu una mostra d’una de les meves entrades realitzada mitjançant aquesta aplicació.

Entrada Apunts Digitals amb Notegraphy.

Animeu-vos a provar-la !!!

Fases metodologia web

En els inicis d’internet el més important era centrar els esforços en el desenvolupament del codi de programació, es a dir, el HTML.

Actualment l’estratègia en el disseny de les pàgines web està centrada en l’usuari. Això implica que en el disseny cal conèixer i pensar en les necessitats dels usuaris que utilitzaran la pàgina web que volem dissenyar.

Tot i que no hi ha una metodologia a seguir consolidada es considera que cal cobrir tres fases en l’ordre següent: una primera fase d’anàlisi, una segona fase de disseny i una tercera fase d’implantació.

Els aspectes més rellevants a considerar en cada fase són les següents:

Referència: Mario Pérez-Montoro

Els aspecteAquest és el primer apunt digital sobre aspectes de l'arquitectura de la informació d'una pàgina web. Un bon llibre de referència sobre temes d'arquitectura de la informació, d'on he extret la informació de la imatge és Arquitectura de la información en entrornos web de Mario Pérez-Montoro

UX mètode no participatiu d'anàlisis d'usuaris

Seguint amb el tema UX user experience us presentaré un dels métodes no participatius més destacats: persones. 

Exemple fitxa persona

Aquest mètode té com a objectiu crear i dissenyar tots els perfils o els tipus de d’usuaris tipus que conformen el públic objectiu d’una web. Es tracta de dissenyar perfils ficticis però que s’han dissenyat a partir de tot el coneixement que es posseeix sobre el públic objectiu real.

La fitxa és el resultat d'entrevistes amb usuaris tipus de la web que es vol dissenyar. Per exemple si volem dissenyar una aplicació App de cuina, buscarem usuaris potencials amb usuaris de iPhone o Android, que els agradi cuinar o tenen necessitats de conèixer receptes bàsiques.

Per a saber-ne més us enllaço dos articles que parlen d'aquesta metodologia.

Bibliografia:

1. An introduction to personas and how to créate, Tina Calabria, 2 de marzo de 2004

Un bon artícle introductori bàsic amb una visió acadèmica de la técnica de persones.

2.  Getting started with building persons, Howard Kaplan, 2008

Un interessant article que ens dona el punt de vista d’una empresa de serveis sobre la construcción de persones.

Podeu consultar també l'anterior entrada d'apunts digitals.

UX experiència d'usuari

Qué és la UX experiència d'usuari?

Actualment en el món Internet s’ha experimentat un gran canvi d’estratègia en el procés del disseny d'una web o website. El principal canvi radica en centrar tot el disseny del lloc web en l’usuari que interactuarà amb la pàgina que volem dissenyar.

Ens referim com a UX a l’experiència d’usuari UX user experince, es a dir a la interacció usuaris-ordinadors (human-computer interaction), per tant cal tenir en compte aspectes UX en el disseny d’una pàgina web.

UX implica que en el disseny d’una pàgina web hem de fer estudis  d'usuaris mitjançant una sèrie d’anàlisis  amb mètodes participatius i mètodes no participatius d’estudis d’usuaris

Per tal de que entengueu millor el que abarca la UX comparteixo aquesta imatge realitzada per  Dan Willis (@uxcrank) en una una presentació de per la Startup Weekend DC en 2011.

UX by Dan Willis

Quan entreu a alguna pàgina web, en especial aquelles en les que heu de seguir un procés de compra, del que es tracta és d'aconseguir l'objectiu d'una forma ràpida i efectiva. Si no és així, segurament la web s'ha dissenyat amb umbrella tancada i recordareu aquest apunt digital.

Núvol d'etiquetes

Segur que heu vist molts núvols de paraules en imatges d'internet. Amb aquest post us explicaré una manera molt fàcil de fer núvols d'etiquetes que sempre són molt vistosos.

Núvol de noms a partir d'una llista

A partir d’una llista de paraules podem general un núvol de tags o etiquetes.  La mida de cadascuna de les etiquetes  vendrà donada per la quantitat de vegades que es repeteix cada paraula de la llista. També es pot generar un núvol d’etiquetes de paraules d’una URL o pàgina web.

Un programa molt ràpid i fàcil d’utilitzar és wordle. 

Aquí us presento dos exemples de núvol  d’etiquetes realitzats amb aquest programa: un generat amb una llista de noms i  un generat a partir de la URL d’aquesta pàgina WEB d’apunts digitals.

Núvol de paraules del blog Apunts Digitals

El llenguatge HTML

Es defineix HTML com un llenguatge de marques per a poder realitzar pàgines web. Es considera un estàndard, es a dir, que té una estructura bàsica i una codificació per a que sigui reconeguda per a totes les tecnologies que s’utilitzen a la web.  El consorci W3C és l’encarregat de fixar les especificacions d’aquests estàndards.

L'estructura bàsica d'aquest llenguatge és la següent:

<html>

    <head>

    </head>

    <body>

     Això és una prova per crear una pàgina web

    </body>

</html> 

Aquesta estructura pot ser escrita directament en un bloc de notes i si el desem com un document amb extensió .html el podem obrir en qualsevol navegador.

Resultat del document en el navegador

Aquest és l'exemple més bàsic, però espero que hàgiu descobert el secret d'una pàgina web.

Mapes conceptuals

Com a llicenciada en Geografia els temes relacionats amb els mapes i la cartografia sempre m’han despertat un gran interès.

Mapa conceptual buscadors

La primera entrada d'apunts digitals parlarà dels mapes conceptuals.

Els mapes conceptuals són una bona manera de representar de forma entenedora els coneixements i les idees a partir de la definició d’un terme. La realització d’aquest tipus de representació implica fer una anàlisi conceptual d’allò que volem definir  i establir relacions entre els diferents conceptes. El concepte a definir s’anomena arrel d’on pengen la resta de conceptes que el defineixen de forma jeràrquica.  Requereix, per tant , una certa dosis de síntesi  ja que representarem els conceptes mitjançant un substantiu i les relacions amb verbs i preposicions. En podeu veure un exemple a la imatge de l'entrada.

Una eina senzilla, gratuita i de fàcil aprenentatge per a realitzar un mapa conceptual és CmapTools. Per a seber-ne més també podeu mirar aquest vídeo de Meta Aprendizaje.

Auca apunts digitals i bona lletra

Abans d’entrar en matèria permeteu-me la llicència de fer una petita auca de la meva experiència.

Carpeta apunts digitals

Començar a estudiar de nou després de més de vint anys va ser tot un repte personal.  I jo tota valenta m’apunto al “full equip” és a dir a totes les assignatures més les anomenades complementàries. 

Els primers dies, com era d’esperar, tota atabalada amb l’adaptació i amb una nova carpeta. Conèixer  nous companys i companyes, els professors i professores i barallant-me amb un campus virtual que anava més lent que jo programant amb HTML.

El lliurament dels primers treballs va ser tota una aventura, mirant constantment el rellotge per arribar al termini marcat per l’assignatura. Això del món digital és un gran invent però tot el dia davant d’una pantalla us asseguro que l’esquena se’n ressent.

Tot i que avui no he parlat d'apunts digitals, espero haver-vos entretingut amb la lectura. Prometo més seriositat a la propera trobada amb una nova entrada.

Presentació del blog Apunts Digitals

Qué és Apunts Digitals?

Apunts Digitals és un blog creat per a realitzar un exercici de l’assignatura de Posicionament Web del Màster de Gestió de Continguts Digitals que estic realitzant a Universitat de Barcelona i Universitat Pompeu Fabra.

En aquest blog, a part de realitzar l’exercici, aniré afegint, mitjançant entrades, els aspectes més rellevants de les assignatures a les que estic assistint.

Tot i que normalment jo prenc nota amb el mètode tradicional de paper i bolígraf, el nom escollit, apunts digitals, respon a la nova tendència de compartir a la xarxa recursos educatius que poden ajudar a ampliar coneixements, establir debats i en definitiva aprendre.

A partir dels exercicis realitzats, la bibliografia aportada i els punts claus recollits en les classes, aniré fent un recorregut dels aspectes més rellevants del que estic aprenent des d'un punt de vista personal i amb un cert toc d'humor.

Espero que us sembli interessant aquest recull i aneu seguint els apunts digitals personalitzats. Els vostres comentaris sempre seran benvinguts !!!