taller pràctic de millora web
TRANSCRIPT
![Page 1: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/1.jpg)
Taller pràctic
Millora de la Plana WebAlbert Alemany
alter ego
Consultoría i Serveis Web
Figueres - Setembre 2010
www.alteregoweb.comwww.slideshare.net/alteregoweb
![Page 2: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/2.jpg)
Que tractarem?
• Primera part:
▫ Perquè volem millorar la web?
▫ El que veiem i el que veuen els buscadors.
▫ Eines que ens indiquen que hem de millorar.
▫ El contingut de la web.
• Segona part:
▫ Part pràctica amb ordinadors.
▫ Fer proves amb les webs i veure canvis.
![Page 3: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/3.jpg)
Perquè volem millorar la nostra web?
![Page 4: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/4.jpg)
Que veiem?
![Page 5: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/5.jpg)
Que veiem amb més detall
![Page 6: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/6.jpg)
Que veiem amb més detall
![Page 7: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/7.jpg)
Que veu el buscador i com?
![Page 8: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/8.jpg)
HTML 4 - Etiquetes
• Els grans blocs
▫ <html>
<head>
Meta Etiquetes
</head>
<body>
Contingut
</body>
▫ </html>
![Page 9: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/9.jpg)
HTML 4 - HEAD• TITLE
• META DESCRIPTION
• Com a principals etiquetes. Exemple:
![Page 10: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/10.jpg)
HTML 4 - BODY
• Flash¿?
• Codi Net i Clar. Ús d’estandards.
• Els elements més importants ben classificats.
• Utilització d’etiquetes en el contingut.
• Bona usabilitat per l’usuari.
• NO, tècniques BLACK HAT (Ex:color text = fons)
![Page 11: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/11.jpg)
HTML 4 – Principals etiquetes
• Titols <h1><h2>…
• <ul> <li> (llistes)
• <p> <i> <b> (text)
• <img> (imatges amb descripcions)
• HTML 5
▫ <audio>
▫ <video>
▫ <personalitzada1>
![Page 12: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/12.jpg)
HTML 4 – Rich Snippets
![Page 13: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/13.jpg)
Eines
• Dos grans blocs
▫ Eines de navegador i d’ús “al moment”.
▫ Eines d’anàlisis.
![Page 14: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/14.jpg)
Eines de navegador
• FireBug + Page Speed
• SEO Quake
• GeoTool
• Extensions específiques per una funciódeterminada. (Ex: creació contingut)
![Page 15: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/15.jpg)
Eines de navegador
![Page 16: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/16.jpg)
Eines de Navegador
![Page 17: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/17.jpg)
Eines d’anàlisis
• Google Webmaster Tools
• Google Analytics
• Google keywords tool
• Heat Maps
• Yahoo site explorer
• Alexa
• Majestic SEO
• ……….
![Page 18: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/18.jpg)
Eines Google
![Page 19: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/19.jpg)
Altres Eines
![Page 20: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/20.jpg)
El contingut de la web
• Hem de pensar primer en els nostres objectius.
▫ Que volem transmetre? Vendre?
• Domini (el triem?)
• TOP 10 Keywords (anàlisi prèvi)
• Renovar-se o morir (nou o mantenir)
• Anàlisis de l’estructura de la web (nº de clicks de distància – “estadística del caminant”)
![Page 21: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/21.jpg)
El contingut de la web
• Anem a pel contingut?
• Quin text i a on?
• Quin significat tindrà el text?
• Titols – Menús – Peus
• La redacció pensant amb buscadors i humans.
![Page 22: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/22.jpg)
El contingut
• Exemples TITLE:
• Hotel empuriabrava suites lujo spa habitaciones
• Hotel-Spa en Empuriabrava con habitaciones y suites de lujo.
![Page 23: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/23.jpg)
Anem a fer pràctiques
• Exercici prèvi:
▫ Redacció titol, meta desc i contingut pàgina inici.
▫ Idees?
▫ Anem a l’aula a treballar. Gràcies.
![Page 24: Taller pràctic de millora Web](https://reader033.vdocuments.site/reader033/viewer/2022051413/5596d7441a28aba9098b46d2/html5/thumbnails/24.jpg)
Taller pràctic
Millora de la Plana WebAlbert Alemany
alter ego
Consultoría i Serveis Web
Figueres - Setembre 2010