Strumenti Utente

Strumenti Sito


editors:buone_pratiche_redazionali

Differenze

Queste sono le differenze tra la revisione selezionata e la versione attuale della pagina.

Link a questa pagina di confronto

Prossima revisione
Revisione precedente
editors:buone_pratiche_redazionali [2011/12/27 17:47]
isacco.occhiali creata
editors:buone_pratiche_redazionali [2021/03/08 15:39] (versione attuale)
Linea 1: Linea 1:
-====== ​Web content best practices ​======+====== ​Buone pratiche redazionali ​======
  
-===== In this section=====+In questa sezione:
  
-  * Learn how to make your site search-engine friendly +  * Imparare come rendere il sito ottimmizzato per i motori di ricerca 
-  * Learn how to make your content accessible +  * Imparare come rendere il contenuto accessibile 
-  * Other web best practices+  * Altre buone pratiche redazionali
  
-===== Making your content search engine friendly ​=====+===== Rendere i tuoi contenuti ottimizzati per i motori di ricerca ​=====
  
-Much of your website traffic will come from search enginesTo ensure your website is findable, you need to write and mark up your content ​in a way that allows the search engine to present the most relevant resultsPut another waysearch engine friendly content will get more relevant traffic to your site.+I motori di ricerca possono creare molto traffico sul tuo sitoPer essere sicuro che il contenuto sia ottimizzato e cercabile dai dai motori occorre scrivere e adattare ciò che è stato inserito ​in modo che sia presentato nelle liste dei risultati più rilevanti. 
 +In altre paroleun contenuto ottimizzato per i motori di ricerca può aumentare le visite al tuo sito.
  
-What makes a site search engine friendlyTwo things:+Cosa rende i contenuti appettibili ai motori di ricercaDue cose:
  
-    ​Relevant content+  *     ​Contenuto pertinente
-    A site built to standards, in other words, in an accessible way.+  ​* ​    Un sito costruito secondo gli standard di accessibilità
  
-Search engine friendliness and accessibility are very closely related - you can think of Google as just another blind user.+Questi due aspetti sono posti in relazione molto stretta, infatti puoi pensare i motori di ricerca come utenti non visibili del tuo sito.
  
-SilverStripe CMS automatically does a number of things that make your site search-engine friendly and accessibleAs a website editoryou don't have to concern yourself with the code side of things. However, there is much you can do to when it comes to your content:+SilverStripe CMS automaticamente esegue delle procedure per ottimizzare il sito per i motori di ricerca e accessibileQuale webeditor non devi preoccuparti di queste procedurema c'è molto che puoi fare in questo senso sui tuoi contenuti inseriti:
  
-    ​Post relevant contentThis may sound obviousbut it's the most important thing you can do as an editor. ​If your content is relevant to your users, your site wil rank higher for the search terms they are using+  *     ​**Pubblicare contenuti rilevanti**Ciò sembra ovvioma per un editor ​è di primaria importanzaSe il tuo contenuto è rilevante per i tuoi utenti allora il tuo sito salirà la graduatoria dei termini di ricerca da loro utilizzati
-    If it's important to you to rank highly for specific phrasesit's key to literally mention these phrases ​in the first paragraph of relevant pages on the site. The absolute best way to rank number one is to have dedicated pages for these phrases. In the title of these pages would be the phrases you wish to rank for+  ​* ​    Se è importante per te dare rilavanza a **specifiche frasi**, è utile menzionarle letteralmente nel primo paragrafo delle pagine rilevanti. La maniera migliore in assoluto per risalire la classifica è avere pagine dedicate a queste frasi, in particolare il titolo di queste pagine dovrebbe contenere la frase
-    ​Use ​CMS tools for to properly mark up your content+  ​* ​    ​Utilizza **Gli strumenti ​CMS** per ottimizzare i tuoi contenuti
-    ​Ensure correct spelling across all your content ​typos make the site rank lower+  ​* ​    ​Assicurati che  i contenuti siano **correctti a livello ortografico** ​errori di battitura abbassano la posizione in classifica del sito
-    ​Ensure there are no broken links in your site again, broken links will make your site rank lower+  ​* ​    ​Assicurati che non ci siano **link rotti** nel tuo sito anche questi abbassano la confidenza ai motori di ricerca
-    ​Provide text alternatives for media contentsuch as ALT text for your images, since search engines can't see imagesjust their descriptions.+  ​* ​    ​Aggiungi del **testo alternativo ai contenuti**quali il testo ALT per le tue immaginiinfatti i motori di ricerca non vedono le immagini ma le loro descrizioni.
  
-=====  URLs, page namestitles and navigation labels ​===== +=====  URLs, nomi di paginetitoli ed etichette di navigazione ​===== 
  
-When you first create a new page, start by entering its name in the Page name field on the Main tab. SilverStripe CMS automatically populates a number of other fields based on that nameYou can leave them as is, or change them individually.+Quando crei una pagina inizia aggiungendo il suo  nome nella sezione principale della pagina. SilverStripe CMS popola automaticamente un certo numero di campi utilizzando questo nomeQuesti campi possono essere modificati individualmente.
  
-Why should you care? It's useful to know where and how the different names are displayed.+Ti consigliamo di darciun'occhiata: è utile conoscere come e dove i differenti nomi vengono visualizzati nel sito.
  
-Screenshot: Page name and Navigation label fields 
-Screenshot: URL and Title fields 
  
-  
  
-    The Page name is what generates the main headline (the <h1> tag) for the page's content. +{{:​editors:​nomepagina_e_etichetta.png?489|}}
-    The Navigation label is what appears in your site's navigation. Sometimes when you have a lengthy page name, it makes sense to create a shortened navigation label. +
-    The URL gets generated based on the page name, using the words and dashes. Human-readable URLs make a page more easily found by search engines. Most of the time, the URL that SilveStripe CMS generates will be fine, but you can manually change it if necessary. +
-    The Title is what appears in the browser'​s title bar and tabs, and in Google'​s search results page (the <​title>​ meta tag.) Page titles should be unique, and shouldn’t exceed 65 characters (spaces included), as Google only shows the first 65 characters in search result titles.+
  
-Notes:+{{:editors:​pagina_metatags.png?​524|}}
  
-Your website developer will have configured your SilverStripe site for either simple or hierarchical or URLs. 
  
-Simple URLs only use a single level of depthFor example, a page for a staff member might be called "John Smith",​ and its URL would be http://​website.com/​john-smithSimple URLs are short and memorablehoweveryou are more likely to have multiple pages with the same name.+  
 +  *     Il **nome della Pagina** è ciò che genera il titolo principale (il tag <h1>) per il contenuto della pagina. 
 +  *     ​L'​**etichetta di navigazione** è ciò che appare nei menu di navigazione del tuo sito. Talvolta quando hai un nome lungo è sensato creare una etichetta più breve. 
 +  *     ​L'​ **URL** viene generato sul nome della pagina usando parole e trattiniURL leggibili piacciono ai motori di ricercaIl più delle volte ciò che genera SilveStripe CMS va già benema è possibile cambiare gli url manualmente. 
 +  *     Il **Titolo** è ciò che appare nella barra del titolo del browser o nelle linguettee nei risultati delle ricerche in Google (il <​title>​ meta tag.) I titoli delle pagine dovrebbero essere unici e non dovrebbere eccerere i 65 caratteri (inclusi gli spazi) infatti Google mostra solo i primi 65 caratteri dei titoli delle pagine nei risultati.
  
-If a URL is already in use, the CMS will generate URLs with numbers, ​e.g., /​staff-members-1,​ /​staff-members-2,​ etc.+<style background box> 
 +:!: **NOTA:**\\  
 +Chi sviluppa il tuo sito ha configurato SilverStripe per URL semplici ​gerarchici.
  
-In this case, it's a good idea to manually change the URLs to something more meaningful, such as /staff-members-berlin, /staff-members-hong-kong.+Gli //URL semplici// utilizzano un solo livello di profondità. Per esempio, una pagina per un membro dello staff può essere chiamata "Paolo Rossi"e il suo URL would be http://​website.it/​paolo-rossi. Gli URL semplici sono corti e facili da ricordare, tuttavia, si hanno maggiori probabilità di avere più pagine con lo stesso nome.
  
-Hierarchical URLs provide a logical path for a page as it exists in the site's structure. In our examplethis might be http://​website.com/​offices/​new-york/staff/john-smith+Se un URL già esiste il CMS crea gli altri URL omonimi aggiungendo un numero, ad esempio, /staff-members-1, ​/staff-members-2, etc.
  
-  +In questo case è un abuona idea cambiarli manualmente con qualcosa di più pertinente al contenuto, ad esempio, /​staff-members-berlin,​ /​staff-members-hong-kong.
-===== Keywords and meta tags ===== +
  
-Meta tags also make your web page more findableThe Description meta attribute should contain a concise and relevant summary of what the page contains. This will show in search engine results, and helps visitors understand the content of the page.+//URL gerarchici//​ invece forniscono una percorso logico alla pagina come essa esiste nell'​albero del sitoNel nostro esempio ciò potrebbe essere http://​website.it/​ufficio/​biblioteca/​staff/​paolo-rossi 
 +</​style>​
  
-Keywords can be used to further describe your page, and help to make your page more findable by search engines. Think about the words users would type in a search engine to find your pages, and make sure that your page includes those words within it. +===== Parole chiave e meta tags ===== 
-Notes:+
  
-Google doesn’t like repetition of keywords and phrases in the title, description or keywordsIt sees this as '​keyword stuffing',​ which is looked at as search engine spam (not good!) Avoid this.+Anche i **Meta tags** contribuiscono a rendere più ricercabili le pagine del sitoIl meta della descrizione dovrebbe contenere un conciso testo riassuntivo di ciò che è mostrato nella pagina. La descrizione viene mostrata nei risultati dei motori di ricerca e ciò aiuta i visitatori a capire quale tipo di informazione ha la pagina.
  
 +Le **Parole chiave** possono essere utilizzate per descrivere ulteriormente la tua pagina, e renderla ancora più cercabile per i motori di ricerca. Considera quali possono essere le parole che i visitatori potrebbero digitare sui motori di ricerca per raggiungere la tua pagina: queste parole dovrebbero essere comprese nella pagina stessa.
 +
 +<style background box>
 +:!: **NOTA:​**\\ ​
 +A Google non piacciono le ripetizioni delle parole chiave o frasi nel titolo. Ritiene questa pratica come [[http://​it.wikipedia.org/​wiki/​Keyword_stuffing|Imbottitura di parole chiave (keyword stuffing)]] e conviene evitarla.
 +</​style>​
    
-===== Clean HTML =====+===== Codice ​HTML ben formattato ​=====
  
-SilverStripe CMS generates clean HTML code when you type your content into the CMSHoweveroften you already have content in another format, such as Microsoft Word, which you need to simply transfer into the CMS.+SilverStripe CMS genera codice ​HTML ben formattato quando scrivi il tuo contenuto nelle pagineTuttaviail tuo contenuto potrebbe provenire da un altro formato ad esempio ​Microsoft Word.
  
-Avoid cutting and pasting directly from a word processor ​with the standard cut and paste functionsAlways "Paste from Word" if using Microsoft ​Word, or "Paste as Text" if using another ​word processor. Word processors tend to do poor jobs of creating web markup code and often insert extraneous code which make your site less search-engine friendly and accessible.+E' bene evitare di incollare direttamente da un word processor ​utilizzando le normali funzioni di taglia e incollautilizza invece **Incolla da Word** se stai usandoMicrosoft ​Word, o **Incolla da testo** se stai utilizzando un altro word processor. ​Word processor tentano goffamente di introdurre del codice html ben formattato, ma il più delle volte inseriscono codice estraneo che minano la confidenza con i motori di ricerca e l'​accessiobilità.
  
  
-===== Making your content accessible ​=====+===== Rendere il contenuto accessibile ​=====
  
-==== Why does accessibility matter? ==== +==== Perché l'​accessibilità è importante? ==== 
  
-An accessible website means that it can be viewed by the widest audience possibleAccessibility not only refers to people with physical disabilities ​(such as blind users), but also people with cognitivelearning or motor skills disabilitiesand people who access your site with mobile devices or oldoutdated technology. Lastlyas mentioned previously, search engines can be considered disabled users in the sense that they can'​t'​ see your design or images or interact with your site.+Un sito web accessibile può essere visualizzato dal più ampio pubblico possibileL'​accessibilità non si riferisce solo alle persone con disabilità fisiche ​(ad esempio gli utenti non vedenti o ipovendeti), ma anche persone con problemi cognitivi di apprendimento o disabilità motoriee le persone che accedono al sito con dispositivi mobili datati e con tecnologia obsoleta. Infinecome accennato in precedenzai motori di ricerca possono essere considerati utenti disabilinel senso che non possono vedere le immagini o interagire con il tuo sito.
  
-Accessibility is important for a number of reasons:+L' Accessibilità è importante per una serie di ragioni:
  
-    ​Ethical—being inclusive is the right thing to do and has a positive impact on how your audience perceives you or your organisation+  *     ​Etica: una politica inclusiva ha un impatto positivo su come il pubblico percepisce voi o la vostra organizzazione
-    ​Business—sites that can be used by everyone have a larger audienceThey are more findable and therefore generate more traffic/​business. Accessible sites are also easier to maintain, resulting in fewer ongoing costs+  ​* ​    ​Commerciale:​ i siti di questo tipo necessitano di raggiungere la più ampia visibilità possibile per incrementaregli affari e il traffico attaverso i motori di ricercai siti accessibili sono anche più facili da manutenere e quindi abbattono questo tipo di costi
-    ​Legal—many governments require websites to comply with certain standardsDetails depend on your countryhowevertypically the guidelines are based on the Web Content Accessibility Guidelines ​developed by the World Wide Web Consortium (W3C.)+  ​* ​    ​Legale:​ molti governi richiedono siti che rispettano determinati standardI dettagli variano da paese a paesetuttaviadi solito le linee guida si basano sulle [[http://​www.w3c.it/​index.php?​id=7&​lang=it|Web Content Accessibility Guidelines]] sviluppato dal World Wide Web Consortium (W3C.)
  
-===== What can content editors do? =====+===== Cosa può fare un redattore? =====
  
-Accessibility is not something you implement once and then have itThere is an infinite number of types of disabilityplatformsdevicesconfigurationsso you have to choose to what level you want to comply.+L'​accessibilità non è qualcosa che una volta implementato rimane taleC'è un infinito numero di tipi di disabilitàpiattaformedispositiviconfigurazioniecc ... e occorre definire quale livello di accessibilità adottare.
  
-The more you know about your usersthe better. Web statssuch as Google Analytics, ​can help you find out about your users' most frequently used browsers and operating systemsUser research can help to learn more about how users with disabilities interact with the site but that's costly and often not an optionAutomated tools can help and are a useful first step as they look for all the obvious issues and generate a list of problems. Howeverit still requires a person to assess and interpret the results and make decisions about items flagged by the automated toolsFor exampleyou can use an automated tool to check whether all your images have alternative textbut you as the editor of your site need to determine if the text in the alt attribute is descriptive and appropriate.+Più si conoscono gli utentimeglio èStatistiche ​Web, come Google Analytics, ​possono aiutare a scoprire quali sono i browser e i sistemi operativi più utilizzati dagli utentiTali strumenti possono aiutare a saperne di più su come gli utenti con disabilità interagiscono con il sito. Vi sono validatori on-line che consentono di ottimizzare i contenuti del proprio sito indicando i problemi incontrati nella navigazioneTuttaviarichiedono ancora una persona per valutare e interpretare i risultati e prendere decisioni sugli elementi contrassegnati dagli strumenti automaticiAd esempioè possibile utilizzare di tali strumenti per verificare se tutte le immagini hanno un testo alternativoe se questo è appropriato con le informazioni presentate sulla pagina.
  
-The following paragraphs describe some of the quick wins—things you can do easily to greatly increase the accessibility of your site.+I parametri seguenti decrivono alcune buone pratiche per incrementare l'​accessibilità del tuo sito.
  
-===== Alternative text for images ​=====+===== Testi alternativi per immagini ​=====
  
-When embedding images ​in your content, always provide alternative text that can serve as placeholder ​in case the image itself cannot be displayed. Alternative text is often referred to as the "ALT tag", although that's not technically correct :-). Alternative text is important for those who cannot see the actual image, such as vision impaired users, people with text-only browsers, or search engineand it should be meaningful and describe what the image shows.+Quando includi immagini nel tuo contenuto aggiungi sempre il testo alternativo (alt) utile come segnaposto nel caso l'​immagine stessa non possa essere visualizzata. Il testo alternativo è spesso riferito al tag ALT ma ciò non è tecnicamente corretto; ​in effetti il testo alternativo è utile chi non è in grado di vedere l'immagine come le persone ipovedenti o non vedentiutenti che utilizzano browser testuali e motori di ricerca.
  
-In addition, you may also want to add title text for your imageTitle text is for additional information about your image, such as the name of the photographer,​ or the date when it was takenThe title text appears as a tooltip when the user hovers over the image.+Inoltre puoi aggiungere un titolo alla tua immagineIl titolo è una informazione aggiuntiva all'​immagine:​ ad esempio si potrebbe citare l'​autore e la data di creazioneIl titolo appare come tootip quando un visitatore passa sopra l'​immagine con il mouse.
  
-ScreenshotImage insert pane+{{:editors:​inserisci_immagine.png?​211|}}
  
  
-===== Headings and lists =====+===== Intestazioni e liste =====
  
-Mark up your headings by selecting the right heading style from the Format dropdownUsing headings properly gives your content hierarchy and, for example, allows users with screen readers to skip ahead to the next headingNote that Heading 1 will be the title of your page, and all lower-level headings should be nested properly (e.g.Heading 3 should be within a Heading 2 section, etc.)+Formatta le tue intestazioni selezionando il giusto stile dalla tendina FormatoCiò apporta una gerarchia testuale al tuo contenuto e aiuta gli utenti che utilizzano screenreader a saltare avanti alla prossima intestazione 
 +La proprietà "Heading 1" sarà il titolo della pagina ​tutte le intestazioni di livello inferiore saranno annidati correttamente(ad es"Heading 3" potrebbe essere inserito fra una sezione ​Heading 2, etc.)
  
-ScreenshotStyles dropdown+{{:editors:​dropdown_intestazioni.png?​195|}}
  
-If your content uses listsselect either bullets ​(unordered listor numbers ​(ordered list) - don't use dashes or asterisks to mark up lists.+Se nel tuo contenuto vi sono delle listepuoi applicare lo stile a pallini ​(lista non ordinatao numerata ​(lista ordinata) - non usare trattini o asterischi per formattare le liste.
  
 ===== Links =====  ===== Links ===== 
  
-When you insert a linkmake sure your link text (the part of your content that's clickableis meaningful and relates to the page you're linking toDon't use "click here" ​or "read more" ​as they don't tell the user where your link is goingThink about what would make sense for someone who has the link text read out to them by a screen ​reader.+Quando si inserisce un collegamentoassicurati che il testo del link (la parte dei contenuti che è cliccabilesia significativo e si riferisca alla pagina in oggettoNon usare "clicca qui" ​"leggi tutto" ​in quanto non dice all'utente dove sta andandoImmaginatevi che siano sempre gli utilizzatori di screenreader ​leggere i contenuti. 
 + 
 +E' possibile aggiungere anche una descrizione ai link, specialmente quando il testo cliccabile non può essere sufficientemente chiaro sulla destinazione. La descrizione è letta dagli screen ​readers, e i browser la mostreranno al passaggio del mouse. 
 + 
 +{{:​editors:​link_editor.png?​208|}} 
 + 
 + 
 +===== Alternative formats for media ===== 
 + 
 +Se il sito utilizza altri media, come Flash, contenuto audio o video, documenti allegati o animazioni, assicurati che questo contenuto sia accessibile agli utenti che non possono vedere o sentire, o che non hanno il software adeguato.  
 +Se ciò è importante per il tuo sito e per i tuoi utenti, l'​accessibilità si può realizzare aggiugnedo trascrizioni,​ sintesi (per i documenti PDF), didascalie (per materiale video), o versioni testuali del contenuto. 
 + 
 + 
 +===== Tabelle e grafici ===== 
 + 
 +Se il tuo sito utilizza grafici per visualizzare informazioni,​ aggiungi dei riassunti testuali che descrivono il contenuto mostrato.
  
-You may also want to add a link description. Especially if your link text isn't too clearyou can provide information about the link's target. Again, this will be read out by screen readers, ​and the browser will display it as a tooltip when the user hovers over the link.+Se invece si utilizzano delle tabelleassicurati anche di ottimizzarli per gli screen readers ​(per esempiocontrassegna intestazioni,​ righe e colonne). E' un abuona pratica aggiugnere un riassunto "​Summary"​ del contenuto.
  
-Screenshotlink editor +Per saperne di più[[ http://​www.w3c.it/​index.php?​id=6|Ufficio italiano W3C]]
-Alternative formats for media+
  
-If your site uses other media, such as Flash, audio or video content, document attachments or animations, make sure this content is accessible to users who can't see or hear it, or who don't have the software to view it. How exactly you do this will depend on the kind of content and how critical it is to your site and your users. Typical alternatives would be transcripts,​ summaries (for example, of PDF documents), captions (for videos), or text-only versions. +====== Altre buone pratiche ======
-Tables and charts+
  
-If your site uses graphs to convey information,​ also provide text-based summaries that describe the information displayed in the graphs.+===== Dimensioni delle immagini ===== 
  
-For tablesmake sure you mark them up so that screen readers can interpret them correctly (for examplemark header rows/​columns as such.) It's also a good idea to provide a text-based summary of the information contained in the table.+Quando si inseriscono delle immagini nei contenutiè utile sempre specificarne la larghezza e l'​altezza. Questo permette al browser di iniziare il rendering della pagina prima di scaricare l'​immagine realee ciò accelera il caricamento della paginaSilverStripe CMS precompila automaticamente le dimensioni dell'immagine, per cui se non vuoi cambiarle, non devi fare nulla di speciale.
  
-Further reading: Introduction to Web Accessibility (external link)+===== Personalizzare le pagine di errore =====
  
-===== Other best practices ===== +Talvolta gli utenti incappano in un errore di "Page not found" perché cliccano su un link obsoleto o sopra un URL non scritto correttamente. L'​errore "Page not Found" è conosciuto come "​errore 404."
  
-===== Image dimensions ===== +E' quindi una buona idea creare una pagina personalizzata di errore 404. Su questa pagina puoi indirizzare gli utenti a pagine chiave del tuo sito e incoraggiarli a utilizzare la mappa del sito o la ricerca interna, nondimeno puoi fornire informazioni su come contattare direttamente i redattori o gli amministratori del sito.
  
-When you embed images in your contentalways specify width and heightThis allows the browser to start rendering the page before downloading the actual image, which speeds up page loadingSilverStripe CMS prepopulates the image dimensions automaticallyso unless you want to change them, you don't have to do anything special. +Per creare una pagina di errore personalizzataclicca nella sezione delle pagine nella tendina relativa al tipo di pagina e scegli "​Pagine errore"​Nella linguetta "​Principale"​ seleziona "Error code 404 - not found" e salvaSebbene che il codice 404 sia l'​errore più comune e più probabilepuoi creare ogni pagina di errore per tutti i tipi di codice di errore.
-Custom error pages+
  
-Sometimes your users will get a Page not Found error because they clicked on an outdated link or misspelled the URL of the page they were looking forThe "Page not Found" error is also known as a "404 error."​+{{:​editors:​crea_pagina_errore.png?374|}}
  
-It's a good idea to create a custom 404 page for your site. On this page, you can refer your users to key pages on your site, encourage them to use search or a sitemap, and give them information on how to contact you about problems with the website. 
  
-To create a custom error page, click Create in the Pages section and select Error Page. In the Main tab, select Error code 404 - not found, then create your content as for any other page. Note that you can also create custom pages for other errors, but Page not found is by far the most common one that your users will encounter so you can usually safely ignore the other options.+{{:​editors:​imposta_pagina_errore.png?600|}}
editors/buone_pratiche_redazionali.1325004441.txt.gz · Ultima modifica: 2021/03/08 15:39 (modifica esterna)