Realizzare il proprio sito WEB...Cos’è l’HTML • Il linguaggio HTML non è un linguaggio di...
56
Realizzare il proprio sito WEB Valeriano Salve Pescara, 27 aprile 2017
Transcript of Realizzare il proprio sito WEB...Cos’è l’HTML • Il linguaggio HTML non è un linguaggio di...
RealizzareilpropriositoWEB
ValerianoSalve
Pescara,27aprile2017
Cos’èl’HTML
• HTML èl'acronimodi HyperText MarkupLanguage edèillinguaggiocolqualevengonocreatelepagineweb.SitrattadiunlinguaggiodipubblicodominiosviluppatoinsenoalW3C,ovveroilWorldWideWebConsortium,cioèilconsorziochepresiedeallosviluppodelwebedeilinguaggiadessoconnessi.
• QuestolinguaggioèstatosviluppatodaunricercatoredelCERN- TimBernersLee - versolafinedeglianniottantaparallelamentealladefinizionedelprotocolloHTTP.Nelcorsodeglianniillinguaggiohasubitodiversemodificheerevisioni.AdoggilaversioneufficialediHTMLèla4.01(pubblicataneldicembredel1999)madamoltiannisistalavorandoadHTML5chesipreannunciacomeunaveraepropriarivoluzioneperilweb.AttualmenteHTML5èsoltantouna"bozza"(cioènonèancorastatorilasciatoufficialmente),tuttavialamaggiorpartedeibrowserincircolazioneneoffregiàundiscretosupporto.
2
Cos’èl’HTML
• IllinguaggioHTML nonèunlinguaggiodiprogrammazioneveroeproprio.Puòesseredefinitocomeun linguaggiodimarcatura (olinguaggiodimarkup)basatosu tag.Itag sonoglielementistrutturalidiognipaginawebecostituisconole"mattonelle"chedannovitaeformaaidocumentiipertestuali.• Ipertestuale perché,attraversoisuoitag,oltreaconsentiredicrearepaginecompostedadiversielementitracuitesto,immagini,video,ecc.permettediconnetteretradiloropaginediversediunostessositoesitiwebdiversi.
3
Lafunzionedelbrowser• IlcompitodiinterpretareimarkupHTMLèaffidatoai browser;cioèaisoftwaredinavigazionesuInternetiqualihannoilcompitodiconnettersiadunserverremotoescaricare(download)ildocumentorichiesto.Unavoltascaricato,ildocumentoverràinterpretatodal"motore"delbrowsercherestituiràall'utentelapaginawebprontaperesserefruita.• sulmercatoesistonodiversibrowser,ipiùfamosisono: Internet Explorer,Edge, Firefox, Chrome,Safari.• E'beneprecisarefindasubitochenontuttiibrowserinterpretanoilcodiceHTMLallastessamaniera,èpertantopossibilenotaredellepiccoledifferenzevisualizzandolastessapaginawebconbrowserdiversi.• Anchesmartphone etablet hannoilorobrowser perleggerelepagineHTML
4
Comeèfattaunapaginaweb
5
Proviamoadaggiungerecodiceaunapaginaweb
• http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default
ComevisualizzareilcodiceHTMLdiunapagina:• UtentiPCconsistemaoperativoWindows:perChrome eFirefox cliccareconiltastodestrosuunapaginawebescegliere«visualizza sorgente pagina»,mentreperInternet Explorer oEDGE cliccareconiltastodestrosuunapaginawebescegliere«HTML»• UtentiMACdaSafari scegliere«preferenze»->«avanzate»->spuntare«mostra menuSviluppo…»equindinelmenù«sviluppo»scegliere«mostra sorgentepagina»mentreperChrome eFirefox ècomeperl’ambianteWindows.
6
CMS(ContentManagementSystem)
• UnCMSèunsoftwarepergestireicontenutidiunsitowebinstallatosuunserver.• Neesistonomoltisiaapagamentochegratuiti.ICMSgratuitioggipiùutilizzatisono:• Wordpress (www.wordpress.org)• Joomla (www.joomla.org)• Drupal (www.dropal.org)
• LasceltadiqualeCMSutilizzaredipendedamoltifattori(Scopodelsito,aggiornabilità,ecc…).ICMSpiùutilizzatioggisonoWordpress eJoomla.
7
https://it.wordpress.com/create/
8
Scegliereillayoutdelpropriosito
9
Scegliereiltipodigraficadelpropriosito
10
Sceltadelnomedelsito
11
Sceltadell’indirizzodelsito
12
Undominio
13
160.78.48.68160.78=indirizzodirete48=indirizzodellasottorete68=indirizzodelcomputer
www.univaq.it
it =nomedominio(Toplevel domain)univaq =nomesottodominio(Dominiodi2° livello)www =serviziorichiesto
www.odg.abruzzo.it
it =nomedominio(Toplevel domain)abruzzo =nomesottodominio(Dominiodi2° livello)odg =nomesottodominio(Dominiodi3° livello)www =serviziorichiesto
Sceltadeldominio
• Nonutilizzarenomitroppolunghiedifficilidaricordare(nonpiùditreparole)• Scegliereparolecomuniutilizzatedagliutenti• Evitarecaratterispecialietrattininelnome:meglioricettedicucina.itchericette-di-cucina.it.Perimotoridiricercaèindifferente(riesconoadistricarsifinoatreparole),masicomunicanoesiricordanomeglio;• Cercareunacorrispondenzatraparolechiaveneldominioeargomentitrattati• L’estensione.it,.com,.org nonèpiùimportantealivelloSEO.
14
Gratisoapagamento?
15
Creareunaccount
16
Dashboard
17
HostingsuARUBA
18
WordPress
Esisteunaversioneon-linediWordPress (www.wordpress.com)chepermettedirealizzareunsitocollegandosidirettamentealserverWordPress.Hapotenzialitàmoltolimitate,offredominiditerzolivello(es.:www.miosito.wordpress.com)edèrivoltosoprattuttoachivuolemettereon-lineunblogconpocheconoscenzetecnicheesenzaalcunaspesa.
19
Itag HTMLpiùimportantiperlericerche
Gestirebenealcunitag èfondamentale,siaperfacilitareillavoroagliSPIDER,siaperaveredellepaginebenleggibilienoncompletamentedipendentidalbrowserchel’utentestautilizzando.Vediamoquellicheciinteressanodipiù:• Title• Description (cheinrealtàèunmetatag)• Keyword• Tag di intestazione
20
Iltag TitleIltag TITLE èlegatoaltitolo dellanostrapaginaweb.
<!DOCTYPEhtml><html><head><title>Quièinserito il titolo della pagina</title></head>
<body><h1>ThisisaHeading</h1><p>Thisisaparagraph.</p></body>
</html>21
Comeimpostarecorrettamenteiltag Title
• Utilizzodeiduepunti:Googledàimportanzaalleprimeparoledeltitoloepremiauncontenutodivisoindueparti.Es.:«MareAbruzzo:nuoveoffertealberghi2016»• Utilizzodelsimbolopipe|:Ilsimbolo| (PIPEèilprimosimboloinaltoasinistranellatastierasottoiltastoESC)divideiltitoloindueblocchi.Puòesseresostituitoanchedaltrattino-Es.:«MareAbruzzo:nuoveofferte2016|AlbergoIlSole»
PercapirecomeGooglecifavedereiltitoloèpossibilevisitare:https://moz.com/blog/new-title-tag-guidelines-preview-tool
22
Comeimpostarecorrettamenteiltag Title
• Iltitolonondovrebbeesserecostituitodapiùdi12parole(quanteneconsideraGoogleperl’indicizzazione)einnonpiùdi60caratteri(spaziinclusi)• Usateimodificatori: inambitoSEO, modificatori sonoparolecome “nuovo”,“migliori”, “offre“,“acquistare”,“economico”e“recensioni”. Gliutentitendono adincludere i modificatori durantelaricerca e durantelavisualizzazionedellaSERP.
23
Iltag DescriptionIltag DESCRIPTION fornisce,all’utenteeaGoogle,ladescrizionedellapagina.
<!DOCTYPEhtml><html><head><title>Quièinserito il titolo della pagina</title>
<metaname=“description”content=“Quideve essere inserita ladescrizione dellapagina webed Isuoi contenuti.”/>
</head>
</html>
24
ComeimpostarecorrettamenteiltagDescription
• Ilnumerodelleparoleutilizzatenondovrebbeesseresuperiorea15inmodocheGooglepossafarlevederetutte;• Ilnumerodeicaratteri(secondoleindicazionidiGoogle)nondovrebbeesseresuperiorea155 (spaziinclusi)• Ilcontenutodelmetatag DESCRIPTION verràvisualizzatonelloSnippet dellaSERP.Inmancanzadeltag DESCRIPTION Googlecercheràladescrizioneall’internodellapaginaeirisultatipotrebberononesserequellidesiderati
25
Snippet
Description
ComeimpostarecorrettamenteiltagDescription
• NonèdettoperòcheunavisualizzazionesullaprimapaginadiGooglesitrasformiautomaticamenteinunaconversione;• Perottenereirisultatidesideratiènecessariolavorare moltoebene sulladescription;• Andrebberoinseriticontenutifortementepersuasiviperl’utente;• Andrebberomesseincorrelazioneleparolechiavicompreseneltitoloeneltestodellapaginaweb;• Utilizzareunadescription unicaperognipagina.AiutaGoogle,maaiutaanchel’utente.
26
Unplugin perWordPressWordPress èunCMSfortementeorientatoversoill’ottimizzazioneperimotoridiricerca.
Unplugin èunpiccoloprogrammachepermettediestenderelefunzionalitàdelCMSperattivitàparticolari
Ilplugin perWordPress è«WordPress Seo»che,unavoltainstallatoedattivato,perogninuovoarticolocheverràinseritoproporràunaschermataincuisiavranno:
• l’anteprimadellosnippet;
• ilcampoperinserireunaparolachiave(ilplugin faràunaverificadell’articolopersuggerirla,maèmeglioinserirlamanualmente);
• Ilcampoperinserireiltitle;
• Ilcampoperinserireladescription;
Terminatol’inserimentoilplugin cipermettedifareunaanalisidellapaginadalpuntodivistadell’ottimizzazioneperimotoridiricerca,conconsigliesuggerimentipermigliorarla.Appenasalvatol’articoloilplugin faràun’altraverificaecidiràdovecomparelaparolachiave,quantevoltecompareecc…ecc…
27
Iltag keywords
• Conl’evoluzionedellacapacitàdeimotoridiricerca,soprattuttoGoogle,difarelascansionedeitestiilmetatag keywordsèdiventatopocoimportante.Moltisiti,anchedigranderilievo,nonloutilizzano,maèsempreutileindicarleperchécontinuanoadessereutilizzatidaalcunimotori.• Ilmetatag keywordshaloscopodiindicareaimotoridiricercaunalistadiparolechiaveinerentiicontenutidellapaginawebincuiiltagappare.
28
Strutturadeltag keywords
Iltag METANAMEvaindicatoall’internodelblocco<head></head>
<!DOCTYPEhtml><html><head><title>Pagetitle</title><METANAME= “KEYWORDS“CONTENT=“confetti,matrimonio,sposi,comunione,battesimo,laurea”>
</head>
<body></body></html>
29
Itag diintestazioneDefinisconol’intestazionedadarealtestocome,adesempio,glistilideicaratteriinWord.Lalorofunzionenonèutilesoloallavisualizzazionedeicaratteri,mahannounruoloancheperimotoridiricerca.
<!DOCTYPEhtml><html><head><title>Pagetitle</title></head>
<body>
<h1>Primaintestazione</h1><h2>Seconda intestazione</h2><p>Questo èunparagrafo</p></body></html>
30
Usodeitag diintestazione:unesempio
31
TestoinHTML Testovisualizzatodalbrowser
Possiamofarequalcheprovaqui:http://www.w3schools.com/html/tryit.asp?filename=tryhtml_defaultOqui:http://htmleditor.in/index.html
GliURL«parlanti»
• AlcuniCMSnonoffronolapossibilitàdimodificarel’URL(indirizzoweb)diunapagina,mageneranoURLnumerici.Seèpossibilemodificarliogestirliautomaticamenteconilnomedell’articoloèsempremegliofarlo;• E’benechel’URLdiunapaginacontengaleparolechiaverilevantiperitag title edescriptionEs.:http://www.salve.ws/index.php/articoli/38-scoop-it-content-curation-alla-portata-di-tutti
• Leparoledell’url vannoseparatedatrattinicosìmotoridiricercapossonoindicizzarleseparatamente;• IprincipaliCMSpossonoessereimpostatiintalsenso
32
UnocchioancheaglialtricontenutiUnsitoweboltrechetesticontieneimmaginiespessoanchefileinformatoPDF.Anchequestielementivannoottimizzatiperfacilitareillavorononsoloaglispider,maancheagliutentichenaviganosulsito
33
OttimizzareifilePDF
AncheperifileinformatoPDFvalequantodettoperlepagineweb.• ScrivereilnomeutilizzandolestesseregolevalideperifileHTML• Definiregliattributidelfile• Titolo (Title):vieneutilizzatocometitoloneimotoridiricerca;• Autore (Author):indical’autoredeldocumento;• Oggetto (Subject):indical’oggettodeldocumentocheèequivalentealladescription neimetatag deifilehtml• L’ottimizzazionepuòesserefattadirettamentesulfile,mavolendosipuòscaricareuntool (inwindows)chepermettedifaremoltealtrecose:http://www.debenu.com/thank-you/tools-free
34
Ottimizzareleimmagini
• Stessodiscorsoancheperleimmagini• RinominareilfileconleregolevisteperifileHTMLeifilePDF(nome«parlante»conparoleseparateda-);
• Modificaregliattributi<alt>e<title>nelcodiceHTML• <alt>(alternativetext)natoperdescrivereicontenutidiunapaginawebancheperinonvedentipuòessereusatoancheperdareinformazionialmotorediricerca.Vienecaricatoquando,perunqualsiasimotivo,nonfossepossibilevisualizzarel’immagine;
• <title>mostrauntestdescrittivoquandosipassaconilmousesuunaimmagine.PuòessereutilizzatodalpuntodivistaSEOsenzatimorediincorrereinripetizionipenalizzanti;
• GooglepremialepaginechesicaricanopiùvelocementefacendoleapparireaiprimipostinellaSERP,quindiattenzionealpeso(dimensioneinbyte)dell’immaginechevienecaricata.
35
Ottimizzareilink
Ancheilinkpossono/debbonoessereottimizzati.• Inserirel’attributotitle neilink(l’attributotitle siattivaalpassaggiodelmousesullink);• Nonutilizzareperillinkparolegenerichedeltipo«cliccaqui»,«seguiillink»ecc…chenondannonessunainformazioneaimotoridiricerca;• Unabuonamossaèinserirenell’attributotitle lostessotestosceltoperleparoledalinkare.
36
Facilitarelanavigazionedelsito
37
• Lanavigazioneèimportantesiapergliutenticheperimotoridiricerca.Googlefornisceirisultatialivellodipagina,maèimportanteche«sappia»qualepuòessereilruolodiunapaginaall’internodiunsito.• LanavigazioneandrebbepianificatapartendodallaHomepagedelsito.Sesihannomolticontenutichepossonoessereraggruppatipotrebbevalerelapenadicreareunapaginaintermediaperciascungruppodipagine.• Utilizzarele«breadcrumb»(bricioledipane).
Ancoraunplug-inperWordPress
38
RisorsediGoogleperl’ottimizzazionedeisiti
Googlecimetteadisposizioneunaseriedirisorseperanalizzareilcomportamentodelnostrosito.Leprincipalisono:• GoogleWebmasterToolshttps://www.google.com/webmasters/tools/home?hl=it• GoogleAnalyticshttps://www.google.com/analytics/
PerentrambibisogneràdisporrediunaccountGoogle
39
GoogleWebmasterTools
40
GoogleWebmasterTools
41
GoogleAnalytics
42
UtilizzareGoogleAnalytics1. CreareunaccountsuGoogleAnalytics
http://www.google.com/intl/it/analytics/2. PercreareunaccountGoogleAnalyticsènecessarioavereunaccountGmail e
quindiinserirenomeutenteepasswordallavoce«creaaccount»;3. Unavoltafattal’iscrizioneilserviziofornisceuncodicejava-script dainserire
nellepaginedelnostrositoperconsentireadAnalyticsdirilevareiltrafficogeneratodaivisitatori.
Perinserireilcodicenelsitoconsultareilserviziodiassistenzaall’url:http://support.google.com/analyticsSesiutilizzaWordPress èpossibileinserireilcodiceattraversounplugin.Possiamotrovarneunoalseguenteurl:http://wordpress.org/extend/plugins/google-analytics-for-wordpress/
43
Scrivereperilweb
Regoladellapiramiderovesciata
Regoladelle5W
44
Lapiramiderovesciata
Informazioneprincipale(Regoladelle5W)
Informazioneimportante
Dettagli
45
Scrivereperilweb
• Lastrutturaapiramiderovesciataèmoltoimportanteperilwebpoichélaletturaon-lineèunaletturaparticolare,moltoveloce,chespessosifainposizioninoncomodee,sempredipiù,condispositiviportatiliconschermidipiccoledimensioniecondizionidilucenonottimali.• Presentarelaconclusionefindalleprimerighepermettedicatturaresubitol’attenzionedellettorecheinquestomodosaràpiùincentivatoacontinuarenellalettura.• Laregoladelle5W(who,what,where,when,why)inquestocasodiventafondamentalepersintetizzareimmediatamenteilcontenutodell’articolo.
46
Scriverepergliutentienonperimotoridiricerca
Googlenelfarelericercheèmoltopiùraffinatodiquantosipossapensare.Provateafarequestedomande:•Quantofa20+2?• TrovamiunparrucchiereaL’Aquila•Dimmichetempofaoggi/domani•QuantoèaltalatorrediPisa?• Fafreddo?
47
Crearecontenutidiqualità
Crearecontenutidiqualitàperunmotorediricercasignificaanche:• Pertinenza• AutorevolezzaMentresullapertinenzasipuòintervenireperquellocheriguardal’autorevolezzailproblemaèchenondipendedanoi,masiacquisisceconiltempoedipendeanchedachiutilizzaicontenuticheabbiamocreato.
48
Visualizzazioneconidispositivimobili:Testdicompatibilità
Googlecioffreglistrumentiperverificareseunsitowebècompatibileconilmobile.All’URL:https://www.google.com/webmasters/tools/mobile-friendly/èpossibileverificareseunsitoèottimizzatoperunafruizionecompletaanchedadispositivimobili.Nellostessotempovengonoindividuatelecriticitàelepossibilisoluzionidaadottare.SempreGoogle,all’URL:https://developers.google.com/webmasters/mobile-sites/get-started/?hl=itcioffreunaguidaperl’ottimizzazionedeisitiwebperilmobile.
49
Problemipiùcomuni
• Visualizzazionenonconfigurata• Caratteritroppopiccoli• Elementitroppoviciniperesseretoccaticonprecisione• Contenutinonridimensionatiinbaseallavisualizzazione• Visualizzazioneimpostatasuunalarghezzafissa• UtilizzodisistemipocoonullacompatibiliqualiadesempioFlash
50
AlcunisuggerimentidirettamentedaGoogle
• VerificarecheilsitopermobilesiaindicizzatodaGoogle(sipuòusareanchel’operatoresite:perfarelaricerca)• Creareunasitemap mobile.Potetetrovarequalchesuggerimentoqui:https://code.google.com/archive/p/sitemap-generators/wikis/SitemapGenerators.wikiancheseGooglenonlofapiùdirettamentecisonoilinkasitichegeneranositemap percellulari• VerificarecheGooglericonoscagliURLpericellulariutilizzandoglistrumentidiGoogle:https://developers.google.com/webmasters/mobile-sites/?hl=itOppurequi:https://support.google.com/webmasters/answer/72462?hl=it
51
Esempidicodiceottimizzatopercellulari
InquestoesempiofornitodaGoogleèevidenziatoilcodiceHTMLnecessarioper«dire»aGooglecheilsitoèottimizzatopericellulari
52
Dispositivi«ammessi»allavisualizzazionedelsito
Codiceconilqualeèstatoscrittoilsito
53
Comeregistrarsisuimotoridiricerca:Google
54
https://www.google.it/intl/it/add_url.html
Comeregistrarsisuimotoridiricerca:Bing
55
http://www.bing.com/toolbox/submit-site-url
RisorsefornitedaGoogle• GruppodiGoogleperilsupportoaiWebmasterhttps://productforums.google.com/forum/#!forum/webmaster-it
• IlGoogleWebmaste central Blog:https://webmasters.googleblog.com/
• Centrodiassistenza«Search Console»diGoogle:https://support.google.com/webmasters/#topic=3309469
• StrumentiperilWebmaster:https://www.google.com/webmasters/tools/home?hl=it
• LineeguidaperWebmaster:https://support.google.com/webmasters/answer/35769
• GoogleAnalyticshttps://www.google.it/analytics/
• Sperimentarecosafunzionaecosanonva:https://support.google.com/analytics/answer/1745147?hl=it
• Avetebisognodiqualcunochelofacciapervoi:https://support.google.com/webmasters/answer/35291
56
