2. Planifica la teva web v2

Núria Lloret - promotora del programa R-Digital
Tècnica d’empresa i emprenedoria
Sessió 2 del programa Training RDigital
Planiﬁcalatevaweb
eﬁcaçment

OBJECTIUS
1. Conèixer el funcionament d’un projecte emprenedor a
Internet
2. Funcionalitats i requisits tècnics per dissenyar una web
de forma eﬁcient
3. Donar les pautes per subcontractar- ne el
desenvolupament
2
Re-Defineix el teu model de negoci d’acord…
al valor afegit, el talent i les oportunitats que ofereix Internet

Avuiparlarem
de...
#dissenyweb #cms
#usabilitat #canvas
#estrategiadigital
1. Els projectes emprenedors a
Internet
2. Web (tecnologia i disseny)
3. Usabilitat
4. Continguts
5. Posicionament
6. Promoció de la web
7. Exercici pràctic: Un canvas
per a l’estratègia digital
3

1.
Elsprojectes
emprenedors
aInternet
4
Test inicial : bit.ly/crealatevaweb

1. ElsprojectesemprenedorsInternet
1. Presència a Internet:
a. Marca personal
b. Imatge corporativa
2. Comercial: Vendes, contactes,
captar clients
a. B2C - Aparador del teu
negoci
b. B2B - Oferir informació de
serveis, productes
3. Indústria 4.0 (IoT, tecnologies
Lo0ra, etc..
5

1. ElsprojectesemprenedorsaInternet
El desenvolupament web és
paral·lel a la teva fase del teu
projecte / empresa
Hem de tenir en compte els
canals on es troben els teus
clients
Idea de negoci - prototip -
llançament de productes
6

7
1. Els projectes emprenedors a Internet
L’evolució d’Internet
Web 1.0 Web 2.0 Web 3.0
➔ HTML estàtica
➔ Email
➔ Fòrums
➔ Xat
➔ Banda d’ample
baixa
➔ Dispositius i
hardware molt
limitat
➔ HTML Dinamic
➔ RSS (Really Simple
syndication)
➔ Podcasting,
videopodcasts
➔ bloggers i microblogins
➔ Xarxes socials
➔ Video
➔ Banda d’ample alta
➔ Preus baixos del
dispositius
➔ Web
semàntica
➔ Cloud / núvol
➔ Micro xarxes
➔ Etiquetatge
➔ XML
➔ XML Schema
➔ RDF
➔ RDF Schema
➔ OWL

La Internet 3.0 o web semàntica
8
1. Creació d’un espai compartit per a l’intercanvi de
dades fortament estructurades
2. La informació ja és semàntica, s’etiqueta de tal
forma que sigui inteligible per a les màquines i les
aplicacions
3. Facilita noves possibilitats de comunicació entre
persones i màquines a través de serveis que
unifiquen múltiples fonts de dades per al tractament,
processament i execució de cerques d’informació

Contextdelsprojectesweb
9
● Equip multidisciplinar (programador, dissenyador, creadors
continguts, traffic maker)
● La web no és un producte tangible (pont, sabates, llibretes, etc..)
● Llenguatge tècnic i amb molts anglicismes
● Sovint el client no sap exactament el que necessita
● Cal marcar-se objectius a curt termini i afinar constantment
● Molta comunicació entre tots els participants

2. Fases d’un projecte web
10
1. Definició
2. Construcció d’un equip de
treball
3. Eines
4. Definició dels requeriments
(estructura i funcionalitats)
5. Definició del calendari
6. Disseny
7. Maquetació
8. Programació
9. Testeig de funcionalitats
10. Inserció de continguts
11. Document de manteniment
12. Inserció de contingut
13. Document de manteniment
ESTRENA

2. Eines de l’equip de treball
11
● Llista de distribució de l’equip
● Espai per compartir documents pel
treball col·laboratiu
● Calendarització de tasques i errors:
Excel,Google Sheets...o una
pissarra física
Metodologies Àgils

1.2.Weborientadaalclient
La clau és tenir una estratègia de comunicació
12
TARGET
/PUBLIC
CANALS DIGITALS
CONTINGUTS
Primer nivell - comunicació i màrqueting
Segon nivell - tecnologia
Objectius, segmentació, orientació,
usabilitat
Arquitectura, disseny,
programació, ubicació

1.2.Weborientadaalclient:Target
Com són els perfils té
el meus clients?
• Sexe
• Edat
• Ingressos
• Educació
• Ètnies
• Nacionalitat
13
Sol·licita hora al servei d’emprenedoria Granollers: nlloret@granollers.cat

1.2.Weborientadaalclient
14
Personal Buyer
Fes una representació fictícia
d’un client ideal basada en
dades reals demogràfiques i
de comportament online, amb
la recreació de possibles
històries personals,
motivacions i preocupacions

1.2.ProtecciódedadesRGPD/ iLSSI
- Política de cookies
- Avís legal
- Política de privacitat
15

1.2.AvísLegal-LSSI34/2002,37/2007
Continguts:
1. El seu nom o denominació social i dades de contacte, que seran: domicili, adreça de
correu electrònic, telèfon o fax.
2. Si l'empresa està registrada al Registre Mercantil , haurà d'assenyalar el nombre
d'inscripció.
3. El seu NIF / CIF.
4. Si l'activitat precisa d'una autorització administrativa prèvia, s'haurà de comunicar les
dades relatives a la mateixa i la identificació de l'òrgan de supervisió.
5. Dades de l'escola provisional , el número de col·legiat, el títol acadèmic, i l'estat de la UE
on es va aconseguir.
6. Condicions generals de venda o condicions de contractació.
7. Altres apartats diferents: també pots informar els usuaris sobre diferents temes, com ara:
clàusules de propietat industrial, responsabilitat, condicions d'ús de la web ... encara que
aquests temes no són obligatoris.
16

1.2.Políticadecookiesipolíticadeprivacitat
RGPD(679/2016-LOPDGDD)
2a capa ( pàgina de privacitat)
- VERSIÓ MÉS EXTENSA
completa del text
https://www.aepd.es/es 17
1a capa:
- Casella de selecció
- Text:
• Responsable del tractament
• Finalitat del tractament de les
seves dades i conservació
• Legitimació per al tractament
• Destinataris de les seves dades
• Drets dels interessats

2. Web:
Arquitecturadela
informació
slider + part
principal de la
home
peu de pàgina
Menú
submenu
18

2. Web:Arquitecturadelainformació
Criteris a tenir en compte
- Visibilitat i accés als continguts
principals
- Elements de navegació per la
web
- Redacció de específica i
organització dels continguts
- Crida a l’acció (call to action)
- Formulari de contacte
- Adreça, telèfon
- Mapa web
19

2.Web:Tecnologiaidisseny
Quin és el tipus més adequat?
Disseny vs Utilitat
20

2.Web:PlataformesdeGestiódecontinguts
(CMS) ContentManagementSystem
21

2.Web:Gestiódecontingutsalaweb
8 Avantatges dels CMS actuals
1. Són fàcils d’implementar
2. Tenen bon posicionament als indexadors (google)
3. Permet que un mateix es gestioni el contingut
4. Estan desenvolupats per una comunitat de persones
5. S’actualitzen regularment
6. Personalització a través de plantilles, widgets i plugins
7. Utilitzen llenguatges de programació estàrdards: HTML, CSS, Java script
8. Si canvies d’empresa desenvolupadora és més fàcil trobar un altre
professional
22

2. Web:Allojamentidomini
Com és la nostra adreça web / url?
www.elmeunegoci.com
Extensions
cat
net
ue
es
info
Nom del dominiWorld Wide
Web
Indica que és
un document
d’hipertext
1. posiciona
2. relacionat amb el negoci
3. evitar guions i caràcters
especials
Adreça IP (Internet Protocol), és un
núméro 104.28.13.62 per saber en quin
servidor es troba 23
http:// - protocol de comunicació
https:// - protocol de
transferència de dades
segur

2. Web:Allojatmentidomini
24
https://www.cdmon.com/es/todos-los-dominios

2. Web:DominisiAllojament
Buscant Hosting i servidor d’Allotjament
3 Criteris de
selecció:
- per preu
- per volum de
dades
- per seguretat
26@nuriallb

3. Usabilitat-Webresponsive
27

3. Usabilitat-Webresponsive
28
Per usabilitat entenem la forma de
dissenyar i estructurar el contingut
d’una web de manera que els usuaris
trobin el que cerquen i necessiten de la
forma més senzilla possible
Fem una prova?
https://developers.google.com/speed/pagespeed/insights/

3. Usabilitat:Tempsdecàrrega
És important que el web carregui el més
ràpid possible
1. Optimitzar el pes de les imatges
2. Utilitzar la compressió dels continguts
Gzip
3. Minimitzar el CSS i JavaSript
Acerca de PageSpeed Insights
6 Test d’usabilitat fonamentals per assegurar l’experiència d’usuari
29

3. Usabilitat:Elsnavegadors
- Comprova que es vegi bé amb tots els navegadors, almenys
els més utilitzats
- Els navegadors tenen varies versions funcionant al mercat,
dependrà sempre de l’usuari
Safari
30

3. Usabilitat:Apps-leswebsiportalsperamòbils
Apps Natives
● Per Android es desenvolupen
amb Java
● Per a iOS es desenvolupen
amb el llenguatge Swift.
● Per a Windows Phone en C++ i
Javascript.
Web Apps
● Utilitza els llenguatges strandards: HTML i
CSS.
● S’executen en el propi navegador del
dispositiu a través de la URL
● La pròpia aplicació s’adapta al dispositiu
que estàs utilitzant
31

4. Màrquetingdecontinguts
Buscant la qualitat
● Rellevants i interessants per
l’audiència
● Que aportin valor afegit a la marca i
al consumidor
● Que fomentin la participació
● Útils per a diferents suports, blogs,
xarxes socials, e mail màrqueting
● Idiomes: només els necessaris
http://etsdigital.cat/reinvencio-digital.cat
Twitter: https://twitter.com/etsdigital
Facebook: https://facebook.com/etsdigital 32

4. ContingutsalaInternet:Imatgesivídeos
Continguts externs vs continguts
propis
Vigilar amb:
● Els drets de propietat
● Imatges ben etiquetades (atribut
ALT)
● Nom rellevant del fitxer de les
imatges
● Pes mínim de les imatges
Recurs: cerca a google o a
banc d’imatges lliures d’autor 33

5. PosicionamentnaturalSEO
Tenir en compte els cercadors i paraules claus
Abans d’introduir els continguts a la web:
- Estructurar-los correctament
- Definir les paraules clau
Indexació en Google Densitat i rellevància Complir le màxim de
criteris de pagerank
34
Programa
EmprènTIC

5. PosicionamentnaturalSEO:laindexació
Eines:
- Spider simulator
- site:www.lamevaempresa.com
Les aranyes dels cercadors tenen
diﬁcultat per indexar si hi ha:
● Java script
● Flash
● Pop Up’s
● Imatges
35

5. PosicionamentnaturalSEO:densitati
prominència
Densitat: Els cercadors miren les
vegades que es repeteix una paraula
en el context de tota la web i les
vegades que es repeteix en una
mateixa pàgina
Prominència: els cercadors donen
més importància a les paraules que
tercers fan servir per enllaçar la
nostra web
Importància per lloc de la pàgina:
- a la URL
- títol de la pàgina
- descripció
- capçalera
- enllaços
- paraules en negreta
Recursos: density analyzer
36

5. PosicionamentnaturalSEO:rànquings
Els cercadors posicionen la web mitjançant algorismes
En base a:
- Núm de visites
- Popularitat (link
building)
- Indexació de la web
- Antiguitat del domini
Recursos: Google Site Maps
37
https://sitemap.mockﬂow.com/

5.PosicionamentalscercadorsSEO-SEM
SEO (Search Engine Optimization )
● Tràfic de qualitat cap a la teva web i
sense cost
● Els resultats i les posicions varien en
funció de la indexació i les paraules
clau
● Presenta resultats a mig termini
● S’ha d’actualitzar periòdicament a
través del SEO local (Google
Business) i la publicació de
continguts
Diferències
SEM (Search Engine Marketing)
● Tràfic de qualitat amb cost per click
● Apareixen en l’espai preferent de google
● Els resultats i les posicions varien en
funció de la indexació i les paraules
clau
● Resultats a curt termini (campanyes de
publicitat, concursos)
● Monitorització a temps real sobre la
segmentació i la localització
38

39
Continguts per propòsits
comercials o d’estratègia de
negoci
1. Fidelització
2. Atracció
3. Conversió
4. Persuasió
Infograﬁa de Vilma Nuñez
6. Promocióexterna
delaweb

40
- Fer accions per generar conﬁança amb el
client, l’usuari
- Prendre decisions sobre serveis i productes
- Generar i millorar les oportunitats de negoci
- Conèixer la competència
6. Promociódelaweb
Avaluacióderesultats
La mètrica serveix per:
Google analytics no pot faltar

Bibliograﬁa
41
● Cómo hacer los textos legales de una web: Cookies, Privacidad y
Aviso Legal
● Ley Orgánica 3/2018, de 5 de diciembre, del - BOE.es
● Ley de Protección de Datos y Garantía de Derechos Digitales
(LOPDGDD) 2018
● https://www.mockflow.com/ - per fer maquetes/ prototipus de webs
● https://trello.com/
● KPI’s ¿Qué son, para qué sirven y por qué y cómo utilizarlos?

http://etsdigital.cat/reinvencio-digital/
https://twitter.com/etsdigital
https://instagram.com/etsdigital
NúriaLloret
Dinamitzadora Digital
938614783 - ext. 2575
https://www.linkedin.com/in/nuriall
b/
nlloret@granollers.cat
7.RecursosiEinesTICperaemprenedors

ElPuntticMuntanyola
formapartde
● Xarxa Punttic de la
Generalitat
● Xarxa Emprèn de la
Generalitat
● Associació de
dinamitzadors digitals
Catalunya
43

2. Planifica la teva web v2

More Related Content

Similar to 2. Planifica la teva web v2

More from Empresa i Emprenedoria Granollers

2. Planifica la teva web v2