Gesti i millora de webs

Xavier Solsona Canutxavier.solsona@antaviana.cat

Qu hi ha darrere de les webs?

Arquitectura de la informaci

Usabilitat

Accessibilitat

Disseny grfic

Continguts

Web 2.0

Arquitectura de la informaci

Disciplina i art encarregada de l'estudi, anlisi, organitzaci, disposici i estructuraci de la informaci en espais d'informaci, i de la selecci i presentaci de les dades en els sistemes d'informaci interactius i no interactius.

HomeTema 1Tema 2Tema n...

Arquitectura de la informaci a la wikipedia Organitzaci dels continguts a la web

http://codice6.udla-diseno.com/

Usabilitat

Usabilitat

Un usuari ha de poder utilitzar de forma senzilla i eficient un disseny interactiuUn web s usable quan aporta informaci rellevant i freqentment actualitzada; quan resulta fcil d'aprendre i recordar; i quan proporciona una experincia subjectivament agradable.

Consells per a webs usableshttp://www.usalo.es
Usabilitat a la wikipedia
Jakob Nielsen

Coneix el teu usuari

contingut

context

usuaris

Usabilitat

FormularisNoms demanar informaci realment necessria

Mostrar clarament quins camps sn obligatoris

Agrupar la informaci

Ajudar a l'usuari en el procs. Avisar dels errors abans d'enviar les dades del formulari

No incloure bot de reset

Pgina de confirmaci

Formularis usables

Usabilitat

Accessibilitat

Accessibilitat

Persones amb discapacitats

Accs al contingut a tot tipus d'usuari, sigui quin sigui l'agent d'usuari usat (navegador web, navegador de veu, telfon mbil, ordinador de cotxe, etc.) o les condicions de l'entorn de consulta (entorns sorollosos, espais mal illuminats, entorns en qu no es poden usar les mans, etc.).

Directrius d'accessibilitat web (WAI) del W3C
Validador HTML

Ms visitas: Al eliminar todas las limitaciones de acceso a su Web, obtenemos un aumento del nmero de potenciales visitantes. Sin duda, sta es una razn muy importante para una empresa que pretenda captar nuevos clientes.Ms velocidad: La accesibilidad permite reducir el tamao de las pginas Web y, por tanto, minimizar el tiempo de carga de las pginas WebMenos Fallos: Una pgina Web accesible es menos propensa a contener errores y ms sencilla de actualizar.

Si su pgina web cumple los estndares de accesibilidad podemos afirmar que se visualizar correctamente y de la misma manera en todos los dispositivos y navegadores del mercado, indepependiente de la conexin, hardware o software que utilicen sus usuarios.

Un sitio Web accesible garantizar el acceso al contenido de todos sus usuarios sean cuales sean las limitaciones que presenten, entre las que se encuentran las siguientes:Accesibilidad Web

* Usuarios con equipos desfasados * Acceso desde otros dispositivos (PDA's, mviles, ) * Navegadores no soportados * Usuarios con problemas visuales (ceguera, daltonismo) * Dificultad o imposibilidad de usar las manos * Sordera o deficiencias auditivas. * Dislexia, dyscalculia, etc

Disseny grfic

Disseny grfic

Disseny web s l'art d'expressar en un lloc web, mitjanant diversitat de colors, ilustracions i imatges per enriquir el contingut del web

Atreure visitants al lloc

Permetre una bona interacci al lloc web

Diseo web a la wikipedia
Zen Garden

Disseny grfic

Tendncies:Cos de text ms gran

Aprofitar l'amplada pantalla

s de tipografies amb relleus

Blocs de contingut multimdia, vdeo, illustracions grans

Ombres, arrodoniments, degradats, transparncies

Tenir molt en compte el target d'usuaris de la nostra web

Tendncies de disseny 2009Tendncies de disseny 2010

Redacci de continguts

Continguts de qualitat

Continguts originals

Redacci de continguts per web Estil propi

Comunicar d'una forma efectiva als seus usuaris

Aconseguir primeres posicions als buscadors

Renovaci contnua

Redacci de continguts per al web

http://www.desarrolloweb.com/articulos/redaccion-para-web-sites.htmlAqu van algunos trucos para lograr internautas felices:

* Tener claro a quien va dirigido el contenido y cual es nuestro target. * Los internautas son impacientes, voraces e inconstantes. (No leen, escanean rpidamente la pantalla en busca de algo que les interese.) * La lectura en un monitor es ms cansadora, incmoda y lenta que en un buen texto impreso. * La pgina principal debe orientar sobre qu trata el sitio, como est estructurado y como navegar en l. * Utilizar prrafos cortos. Si lo que decimos es muy importante, podemos expresarlo en tres o cuatro frases. * Utilizar ttulos y subttulos para ayudar a clasificar la informacin, hacerla ms visual y rpida para el usuario. * Utilizar diferentes tamaos en las tipografas (titular y cuerpo) o (titular, cuerpo y epgrafes) sin exagerar. * Destacar los textos ms importantes: utilizar la negrita y el subrayado. * Emplear hiperenlaces ayuda a mantener el inters del lector (hipervnculos sean informativos, explicativos, atractivos). * Los textos deben de ser cortos (debe evitar un abuso del scroll) * Si la informacin es muy larga, procurar dividirla en varias pantallas. * Aprovechar las imgenes y grficos (una imagen vale ms que mil palabras). * Emplear listas siempre que sea posible (mejor lectura y ofrecen enlaces). * Utilizar verbos en vez de frases: explica en lugar de Sirve para explicar. * Ser preciso con las palabras, si hablamos de cuestiones meteorolgicas decir clima y no tiempo. * Lenguaje simple e informal (la lectura es ms rpida). * Utilizar una ortografa y gramtica correctas. Revsalo todas las veces que sean necesarias. Si es posible, que lo lean distintas personas. Mucha gente rechaza frases mal escritas. * Columnas ms estrechas pueden hacer que la lectura sea ms gil (no ms de 10-12 palabras por lnea.) * En la pantalla las fuentes sans-serif se leen mejor que las serif (serif: Times, Book, Garamond. Sans serif: Arial, Verdana, Tahoma). * Tamao de tipografa ptimo 12 puntos. * Cuando se hace una versin HTML "para imprimir" emplear dos hojas de estilo distintas, una para imprimir (sin enlaces, etc..) y otra para mostrar en pantalla.

Web 2.0

Web 2.0

El Web 2.0 s un conjunt de recursos, aplicacions, possibilitats tecnolgiques i sobretot actituds personals que han revisat la interacci i la relaci entre les persones a la Xarxa.

Web 2.0 a la wikipedia

Web 2.0

Compartir informaciRSS: Netvibes,Google Reader

Addthis

Xarxes SocialsMultimdia: Youtube,Flickr

Musicals: LastFM, MySpace

Empresarials: LinkedIn

Facebook: Pgines i Grups

Twitter

Exemples d'integracihttp://www.donarsang.gencat.cat/http://www.cpnl.cat/

Que hem d'evitar?

Navegacihttp://www.havenworks.com/

http://www.stexps.com/

El misteri de la navegaci http://lesailes.hermes.com/

http://www.leoburnett.ca/FLASH/index.htm

Flash http://www.cafeintl.net/

http://www.flatpakhouse.com/

http://www.torchia.com/

Contrast colors i mida del texthttp://www.moma.org/interactives/exhibitions/2001/workspheres/index.html

http://blog.enraona.com/index.php/2009/11/06/5-coses-a-evitar-per-millorar-el-teu-web-sense-programar/

http://alt1040.com/2009/10/las-50-cosas-mas-molestas-de-internet

http://www.webpagesthatsuck.com/ugliest-worst-web-pages-of-the-decade.html

Velocitat de descrrega de les planes Continguts accessibles tant per navegaci com per recerca Codificaci estndard per a garantir la compatibilitat entre navegadorsNo usar marcs (frames) ni altres elements que trenquin la unitat bsica d'informaci i navegaci (la plana) Planes fcilment llegibles i fcils descanejar visualments d'interficies estndardHa de resultar senzill per a l'usuari identificar la seva posici a la web

Ens interessa que ens trobin

Posicionament

L'esfor es concentra en iniciar una cadena d'esdevenimentsEl web apareix en els primers llocs dels motors de cerca i es troba all on es busca

L'usuari que busca una soluci fa una cerca i decideix entrar al web

A l'usuari li agrada all que troba, creu que val la pena invertir-hi ms
temps i fer un pas ms

Es realitza una acci desvirtualitzada, fora web: trucada, visita, ...

Posicionament

Posicionament orgnic

Posicionament de pagament

Posicionament

SEO Search Engine Optimization

SEM Search Enginge Marketing

SMO Social Media Optimization

SEO / SMOSEM

GratutPagament

Llarg terminiCurt termini

Ms control

Els motors de cerca han de saber que existim

Llegeixen tot el contingut (text i etiquetes HTML) de les planes web

Processen informaci que hi troba i pot desxifrar i la guardaIdentifiquen de qu tracta la plana

Reconeixen text i la importncia que tenen les paraules dins la plana

Factors interns (I)

Qualitat en el denvolupamentCodi vlid i ben estructurat

Optimitzaci del pes d'imatges i d'arxius

Organitzaci estructural del web

Integraci de paraules clau

Format del text Semntica

Domini i URLs amigables

Text de la porta d'entrada Metatags

Text d'ancoratge dels enllaos

Cada imatge s'explica en paraules

Factors interns (II)

Arxius ofimtics i PDF llegibles

Actualitzaci regular de la informaci

Tenir en compte la ubicaci geogrfica dels usuarisIdioma dels continguts

Domini de la web

IP del servidor on est allotjat

Facilitar la feina als motors de cerca (robots.txt i sitemaps.xml, metatags: follow, nofollow, index, noindex)

Google webmaster tools Generadors de sitemaps:http://enarion.net/google/phpsitemapng/crawler/http://www.xml-sitemaps.com/

Factors externs

Necessitem que els altres ens recolzinNmero d'enllaos externs

Aportar valor i continguts nous vinculats a l'activitat

PageRank

SMONoves formes de relaci amb els nostres usuaris

Pla de posicionament

Preparaci del web

Tria de paraules clauRedacci de continguts

Previsi de resultats

Marcar objectius interns del web

Control regular

Revisi de la posici, origen de visites, dels enllaos ...

Anlisi de resultats

Quadre de comandamentsInforme de resultats i proposta de canvis

Analtica web

Analtica web

L'analtica web s l'estudi de l'activitat en un lloc web, a partir de les dades extretes de la navegaci dels usuaris.

Analtica web a la wikipedia

Analtica web

Per a qu serveix?Qu fan els nostres usuaris?

Qu els agrada ms i qu menys?

Quins sn els seus interessos?

Com ens han trobat?

Quins segments sn els ms rendibles?

Quins problemes tenen?

Analtica web

Conixer als nostres usuaris ens permet:Optimitzar campanyes de mrqueting

Millorar usabilitat i navegaci

Optimitzar el contingut

Millorar les rtios de conversi

Rendibilitzar la publicitat en la pgina

Analtica web - Mtriques

Es denomina mtrica a les diferents dades extretes de la navegaci dels usuaris:sessions, visites, usuaris nics, referers, pgines vistes, visitants, temps

Analtica web - Mtriques

Sessions (=visites) Nombre mxim de visites a un lloc web amb un temps mxim d'inactivitat de 30 minuts

Usuaris nics (=visitants) Nombre d'usuaris diferents que han entrat en un lloc web durant un perode de temps determinat

Pgines vistesNombre de pgines que es visualitzen durant totes les visites a un lloc web

Analtica web - Mtriques

Quantes vegades han entrat al meu lloc?Visites

Quantes persones diferents han entrat al meu lloc?Usuaris nics

Quantes pgines del meu lloc visualitzen els usuaris?Pgines vistes

Quant temps passen els usuaris al meu lloc?Temps en el lloc

Analtica web - Mtriques

Temps en el llocTemps entre l'hora d'arribada al lloc, i l'hora que es visita l'ltima pgina del lloc abans d'abandonar-lo o de tancar el navegador

No existeix una mtrica perfecta, cada lloc t la seva mtrica adequada

Google Analytics

Google Analytics s un sistema d'analtica web que recull dades mitjanant codi javascript

Gratis

Fcil d'implementar

Fcil d'utilitzar i d'apendre

Administraci d'usuaris, perfils i filtres

Enviament d'informes per correu

Seguiment de campanyes

Basat en URL i ttols

Javascript i cookies

Privacitat??

Noms visitants

Google Analytics Suport

Google Analytics

Installacihttp://www.google.com/analytics

Insertar codi javascript a totes les pgines just abans de

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write("\\" );

var pageTracker = _gat._getTracker("UA-123456-1");pageTracker._initData();pageTracker._trackPaginaweergave();

Google Analytics

Google Analytics

Seguiment de campanyesEl mesurament de les campanyes de mrqueting es realitza mitjanant un procs anomenat etiquetatge d'enllaos que consiteix en afegir certa informaci extra als enllaos de destinaci utilitzats en les nostres campanyes de mrqueting

La millor manera d'etiquetar els enllaos s a travs de l'eina Creador d'URL de Google Analytics

http://www.google.es/support/googleanalytics/bin/answer.py?answer=55578&query=creador+de+url

Gesti de continguts

Gesti de continguts

Tipus de contingutsContinguts esttics: Continguts de text amb poca variabilitat en el temps

Continguts dinmics: Continguts amb molta variabilitat i actualitzaci

Continguts multimdia: Vdeo, galeries d'imatges

Continguts compartits: Calendaris, documents collaboratius, grups...

Gesti de continguts

Tipus de contingutsContinguts esttics: Continguts de text amb poca variabilitat en el temps

Continguts dinmics: Continguts amb molta variabilitat i actualitzaci

Continguts multimdia: Vdeo, galeries d'imatges

Continguts compartits: Calendaris, documents collaboratius, grups...

Gesti de continguts

CMS: Eines per a la gesti de continguts Wordpress

Joomla

Drupal

Houdini

Gesti de continguts

Comunitats de blogs on-lineWordpress

Blogger

Serveis gesti d'imatgesFlick

Picassa

Gesti de videosYoutube

Vimeo

...

Moltes grcies

Muokkaa otsikon tekstimuotoa napsauttamalla

Muokkaa jsennyksen tekstimuotoa napsauttamallaToinen jsennystasoKolmas jsennystasoNeljs jsennystasoViides jsennystasoKuudes jsennystasoSeitsems jsennystasoKahdeksas jsennystasoYhdekss jsennystaso