Eines per a la millora i el manteniment de webs

689 views

Published on

Curs de millora i manteniment de webs realitzat a la Borrassa Rural Lab per als tècnics de joventut de la demarcació de Lleida.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
689
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Más visitas: Al eliminar todas las limitaciones de acceso a su Web, obtenemos un aumento del número de potenciales visitantes. Sin duda, ésta es una razón muy importante para una empresa que pretenda captar nuevos clientes. Más velocidad: La accesibilidad permite reducir el tamaño de las páginas Web y, por tanto, minimizar el tiempo de carga de las páginas Web Menos Fallos: Una página Web accesible es menos propensa a contener errores y más sencilla de actualizar. Si su página web cumple los estándares de accesibilidad podemos afirmar que se visualizará correctamente y de la misma manera en todos los dispositivos y navegadores del mercado, indepependiente de la conexión, 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, móviles, …) * Navegadores no soportados * Usuarios con problemas visuales (ceguera, daltonismo) * Dificultad o imposibilidad de usar las manos * Sordera o deficiencias auditivas. * Dislexia, dyscalculia, etc
  • http://www.desarrolloweb.com/articulos/redaccion-para-web-sites.html Aquí 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 rápidamente la pantalla en busca de algo que les interese.) * La lectura en un monitor es más cansadora, incómoda y lenta que en un buen texto impreso. * La página principal debe orientar sobre qué trata el sitio, como está estructurado y como navegar en él. * Utilizar párrafos cortos. Si lo que decimos es muy importante, podemos expresarlo en tres o cuatro frases. * Utilizar títulos y subtítulos para ayudar a clasificar la información, hacerla más visual y rápida para el usuario. * Utilizar diferentes tamaños en las tipografías (titular y cuerpo) o (titular, cuerpo y epígrafes) sin exagerar. * Destacar los textos más importantes: utilizar la negrita y el subrayado. * Emplear hiperenlaces ayuda a mantener el interés del lector (hipervínculos sean informativos, explicativos, atractivos). * Los textos deben de ser cortos (debe evitar un abuso del scroll) * Si la información es muy larga, procurar dividirla en varias pantallas. * Aprovechar las imágenes y gráficos (una imagen vale más 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 meteorológicas decir clima y no tiempo. * Lenguaje simple e informal (la lectura es más rápida). * Utilizar una ortografía y gramática correctas. Revísalo todas las veces que sean necesarias. Si es posible, que lo lean distintas personas. Mucha gente rechaza frases mal escritas. * Columnas más estrechas pueden hacer que la lectura sea más ágil (no más de 10-12 palabras por línea.) * En la pantalla las fuentes sans-serif se leen mejor que las serif (serif: Times, Book, Garamond. Sans serif: Arial, Verdana, Tahoma). * Tamaño de tipografía óptimo 12 puntos. * Cuando se hace una versión HTML "para imprimir" emplear dos hojas de estilo distintas, una para imprimir (sin enlaces, etc..) y otra para mostrar en pantalla.
  • 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 descàrrega de les planes Continguts accessibles tant per navegació com per recerca Codificació estàndard per a garantir la compatibilitat entre navegadors No usar marcs ( frames ) ni altres elements que trenquin la unitat bàsica d'informació i navegació (la plana) Planes fàcilment llegibles i fàcils d’escanejar visualment Ús d'interficies estàndard Ha de resultar senzill per a l'usuari identificar la seva posició a la web
  • Eines per a la millora i el manteniment de webs

    1. 1. Gestió i millora de webs <ul>Xavier Solsona Canut [email_address] </ul>
    2. 2. Què hi ha darrere de les webs? <ul><li>Arquitectura de la informació
    3. 3. Usabilitat
    4. 4. Accessibilitat
    5. 5. Disseny gràfic
    6. 6. Continguts
    7. 7. Web 2.0 </li></ul>
    8. 8. Arquitectura de la informació <ul><li>Disciplina i art encarregada de l'estudi, anàlisi, 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. </li></ul>Arquitectura de la informació a la wikipedia Organització dels continguts a la web Home Tema 1 Tema 2 Tema n ...
    9. 9. http://codice6.udla-diseno.com/
    10. 10. Usabilitat
    11. 11. Usabilitat Un usuari ha de poder utilitzar de forma senzilla i eficient un disseny interactiu Un web és usable quan aporta informació rellevant i freqüentment actualitzada; quan resulta fàcil d'aprendre i recordar; i quan proporciona una experiència subjectivament agradable. Consells per a webs usables http://www.usalo.es Usabilitat a la wikipedia Jakob Nielsen <ul>Coneix el teu usuari </ul>contingut context usuaris
    12. 12. Usabilitat <ul><li>Formularis </li><ul><li>Només demanar informació realment necessària
    13. 13. Mostrar clarament quins camps són obligatoris
    14. 14. Agrupar la informació
    15. 15. Ajudar a l'usuari en el procés. Avisar dels errors abans d'enviar les dades del formulari
    16. 16. No incloure botó de ”reset”
    17. 17. Pàgina de confirmació </li></ul></ul>Formularis usables
    18. 18. Usabilitat
    19. 19. Accessibilitat
    20. 20. Accessibilitat <ul><li>Persones amb discapacitats
    21. 21. Accés al contingut a tot tipus d'usuari, sigui quin sigui l'agent d'usuari usat (navegador web, navegador de veu, telèfon mòbil, ordinador de cotxe, etc.) o les condicions de l'entorn de consulta (entorns sorollosos, espais mal il·luminats, entorns en què no es poden usar les mans, etc.). </li></ul>Directrius d'accessibilitat web (WAI) del W3C Validador HTML
    22. 22. Disseny gràfic
    23. 23. Disseny gràfic <ul><li>Disseny web és l'art d'expressar en un lloc web, mitjançant diversitat de colors, ilustracions i imatges per enriquir el contingut del web
    24. 24. Atreure visitants al lloc
    25. 25. Permetre una bona interacció al lloc web </li></ul>Diseño web a la wikipedia Zen Garden
    26. 26. Disseny gràfic <ul><li>Tendències: </li><ul><li>Cos de text més gran
    27. 27. Aprofitar l'amplada pantalla
    28. 28. Ús de tipografies amb relleus
    29. 29. Blocs de contingut multimèdia, vídeo, il·lustracions grans
    30. 30. Ombres, arrodoniments, degradats, transparències </li></ul><li>Tenir molt en compte el target d' usuaris de la nostra web </li></ul>Tendències de disseny 2009 Tendències de disseny 2010
    31. 31. Redacció de continguts
    32. 32. Continguts de qualitat <ul><li>Continguts originals
    33. 33. Redacció de continguts per web </li><ul><li>Estil propi
    34. 34. Comunicar d'una forma efectiva als seus usuaris
    35. 35. Aconseguir primeres posicions als buscadors </li></ul><li>Renovació contínua </li></ul>Redacció de continguts per al web
    36. 36. Web 2.0
    37. 37. Web 2.0 <ul>El Web 2.0 és un conjunt de recursos, aplicacions, possibilitats tecnològiques i sobretot actituds personals que han revisat la interacció i la relació entre les persones a la Xarxa. </ul>Web 2.0 a la wikipedia
    38. 38. Web 2.0 Compartir informació <ul><li>RSS: Netvibes , Google Reader
    39. 39. Addthis </li></ul>Xarxes Socials <ul><li>Multimèdia: Youtube , Flickr
    40. 40. Musicals: LastFM , MySpace
    41. 41. Empresarials: LinkedIn
    42. 42. Facebook : Pàgines i Grups
    43. 43. Twitter </li></ul>Exemples d'integració http://www.donarsang.gencat.cat/ http://www.cpnl.cat/
    44. 44. Que hem d'evitar? <ul><li>Navegació </li><ul><li>http://www.havenworks.com/
    45. 45. http://www.stexps.com/ </li></ul><li>El misteri de la navegació </li><ul><li>http://lesailes.hermes.com/
    46. 46. http://www.leoburnett.ca/FLASH/index.htm </li></ul><li>Flash </li><ul><li>http://www.cafeintl.net/
    47. 47. http://www.flatpakhouse.com/
    48. 48. http://www.torchia.com/ </li></ul><li>Contrast colors i mida del text </li><ul><li>http://www.moma.org/interactives/exhibitions/2001/workspheres/index.html </li></ul></ul>
    49. 49. Ens interessa que ens trobin
    50. 50. Posicionament <ul><li>L'esforç es concentra en iniciar una cadena d'esdeveniments </li><ul><li>El web apareix en els primers llocs dels motors de cerca i es troba allà on es busca
    51. 51. L'usuari que busca una solució fa una cerca i decideix entrar al web
    52. 52. A l'usuari li agrada allò que troba, creu que val la pena invertir-hi més temps i fer un pas més
    53. 53. Es realitza una acció desvirtualitzada, fora web: trucada, visita, ... </li></ul></ul>
    54. 54. Posicionament Posicionament orgànic Posicionament de pagament
    55. 55. Posicionament <ul><li>SEO – Search Engine Optimization
    56. 56. SEM – Search Enginge Marketing
    57. 57. SMO – Social Media Optimization </li></ul>SEO / SMO SEM Gratuït Pagament Llarg termini Curt termini Més control
    58. 58. Els motors de cerca han de saber que existim <ul><li>Llegeixen tot el contingut (text i etiquetes HTML) de les planes web
    59. 59. Processen informació que hi troba i pot desxifrar i la guarda </li><ul><li>” Identifiquen” de què tracta la plana
    60. 60. Reconeixen text i la importància que tenen les paraules dins la plana </li></ul></ul>
    61. 61. Factors interns (I) <ul><li>Qualitat en el denvolupament </li><ul><li>Codi vàlid i ben estructurat
    62. 62. Optimització del pes d'imatges i d'arxius </li></ul><li>Organització estructural del web
    63. 63. Integració de paraules clau
    64. 64. Format del text – Semàntica
    65. 65. Domini i URLs amigables
    66. 66. Text de la porta d'entrada – Metatags
    67. 67. Text d'ancoratge dels enllaços
    68. 68. Cada imatge s'explica en paraules </li></ul>
    69. 69. Factors interns (II) <ul><li>Arxius ofimàtics i PDF llegibles
    70. 70. Actualització regular de la informació
    71. 71. Tenir en compte la ubicació geogràfica dels usuaris </li><ul><li>Idioma dels continguts
    72. 72. Domini de la web
    73. 73. IP del servidor on està allotjat </li></ul><li>Facilitar la feina als motors de cerca (robots.txt i sitemaps.xml, metatags: follow, nofollow, index, noindex) </li></ul>Google webmaster tools Generadors de sitemaps: http://enarion.net/google/phpsitemapng/crawler/ http://www.xml-sitemaps.com/
    74. 74. Factors externs <ul><li>Necessitem que els altres ens recolzin </li><ul><li>Número d'enllaços externs
    75. 75. Aportar valor i continguts nous vinculats a l'activitat
    76. 76. PageRank </li></ul><li>SMO </li><ul><li>Noves formes de relació amb els nostres usuaris </li></ul></ul>
    77. 77. Pla de posicionament Preparació del web Tria de paraules clau Redacció de continguts Previsió de resultats Marcar objectius interns del web Control regular Revisió de la posició, origen de visites, dels enllaços ... Anàlisi de resultats Quadre de comandaments Informe de resultats i proposta de canvis
    78. 78. Analítica web
    79. 79. Analítica web <ul>L'analítica web és l'estudi de l'activitat en un lloc web, a partir de les dades extretes de la navegació dels usuaris. </ul>Analítica web a la wikipedia
    80. 80. Analítica web <ul><li>Per a què serveix? </li><ul><li>Què fan els nostres usuaris?
    81. 81. Què els agrada més i què menys?
    82. 82. Quins són els seus interessos?
    83. 83. Com ens han trobat?
    84. 84. Quins segments són els més rendibles?
    85. 85. Quins problemes tenen? </li></ul></ul>
    86. 86. Analítica web <ul><li>Conèixer als nostres usuaris ens permet: </li><ul><li>Optimitzar campanyes de màrqueting
    87. 87. Millorar usabilitat i navegació
    88. 88. Optimitzar el contingut
    89. 89. Millorar les ràtios de conversió
    90. 90. Rendibilitzar la publicitat en la pàgina </li></ul></ul>
    91. 91. Analítica web - Mètriques <ul><li>Es denomina ”mètrica” a les diferents dades extretes de la navegació dels usuaris: </li><ul><li>sessions, visites, usuaris únics, referers, pàgines vistes, visitants, temps … </li></ul></ul>
    92. 92. Analítica web - Mètriques <ul><ul><li>Sessions (=visites)
    93. 93. Nombre màxim de visites a un lloc web amb un temps màxim d'inactivitat de 30 minuts
    94. 94. Usuaris únics (=visitants)
    95. 95. Nombre d'usuaris diferents que han entrat en un lloc web durant un període de temps determinat
    96. 96. Pàgines vistes
    97. 97. Nombre de pàgines que es visualitzen durant totes les visites a un lloc web </li></ul></ul>
    98. 98. Analítica web - Mètriques <ul><ul><li>Quantes vegades han entrat al meu lloc?
    99. 99. Visites
    100. 100. Quantes persones diferents han entrat al meu lloc?
    101. 101. Usuaris únics
    102. 102. Quantes pàgines del meu lloc visualitzen els usuaris?
    103. 103. Pàgines vistes
    104. 104. Quant temps passen els usuaris al meu lloc?
    105. 105. Temps en el lloc </li></ul></ul>
    106. 106. Analítica web - Mètriques <ul><ul><li>Temps en el lloc
    107. 107. Temps entre l'hora d'arribada al lloc, i l'hora que es visita l'última pàgina del lloc abans d'abandonar-lo o de tancar el navegador
    108. 108. No existeix una mètrica perfecta, cada lloc té la seva mètrica adequada </li></ul></ul>
    109. 109. Google Analytics <ul><li>Google Analytics és un sistema d'analítica web que recull dades mitjançant codi javascript </li></ul><ul><li>Gratis
    110. 110. Fàcil d'implementar
    111. 111. Fàcil d'utilitzar i d'apendre
    112. 112. Administració d'usuaris, perfils i filtres
    113. 113. Enviament d'informes per correu
    114. 114. Seguiment de campanyes </li></ul><ul><li>Basat en URL i títols
    115. 115. Javascript i cookies
    116. 116. Privacitat??
    117. 117. Només visitants </li></ul>Google Analytics Suport
    118. 118. Google Analytics <ul><li>Instal·lació </li><ul><li>http://www.google.com/analytics
    119. 119. Insertar codi javascript a totes les pàgines just abans de </body> </li></ul></ul><script type=&quot;text/javascript&quot;> var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;);document.write(&quot;<script src='&quot; + gaJsHost + &quot;google-analytics.com/ga.js' type='text/javascript'></script>&quot; ); </script> <script type=&quot;text/javascript&quot;> var pageTracker = _gat._getTracker(&quot;UA-123456-1&quot;);pageTracker._initData();pageTracker._trackPaginaweergave();</script> </body> </html>
    120. 120. Google Analytics
    121. 121. Google Analytics <ul><li>Seguiment de campanyes </li><ul><li>El mesurament de les campanyes de màrqueting es realitza mitjançant un procés anomenat ”etiquetatge d'enllaços” que consiteix en afegir certa informació extra als enllaços de destinació utilitzats en les nostres campanyes de màrqueting
    122. 122. La millor manera d'etiquetar els enllaços és a través de l'eina Creador d'URL de Google Analytics </li></ul><li>http://www.google.es/support/googleanalytics/bin/answer.py?answer=55578&query=creador+de+url </li></ul>
    123. 123. Gestió de continguts
    124. 124. Gestió de continguts <ul><li>Tipus de continguts </li><ul><li>Continguts estàtics: Continguts de text amb poca variabilitat en el temps
    125. 125. Continguts dinàmics: Continguts amb molta variabilitat i actualització
    126. 126. Continguts multimèdia: Vídeo, galeries d'imatges
    127. 127. Continguts compartits: Calendaris, documents col·laboratius, grups... </li></ul></ul>
    128. 128. Gestió de continguts <ul><li>Tipus de continguts </li><ul><li>Continguts estàtics: Continguts de text amb poca variabilitat en el temps
    129. 129. Continguts dinàmics: Continguts amb molta variabilitat i actualització
    130. 130. Continguts multimèdia: Vídeo, galeries d'imatges
    131. 131. Continguts compartits: Calendaris, documents col·laboratius, grups... </li></ul></ul>
    132. 132. Gestió de continguts <ul><li>CMS : Eines per a la gestió de continguts </li><ul><li>Wordpress
    133. 133. Joomla
    134. 134. Drupal
    135. 135. Houdini
    136. 136. … </li></ul></ul>
    137. 137. Gestió de continguts <ul><li>Comunitats de blogs on-line </li><ul><li>Wordpress
    138. 138. Blogger </li></ul><li>Serveis gestió d'imatges </li><ul><li>Flick
    139. 139. Picassa </li></ul><li>Gestió de videos </li><ul><li>Youtube
    140. 140. Vimeo </li></ul><li>... </li></ul>
    141. 141. Moltes gràcies

    ×