Obiettivi

A conclusione del corso i partecipanti dovrebbero essere in grado di:

conoscere il significato di CMS (Content Management System) conoscere i servizi che offrono free web building registrare un proprio dominio riconoscere le fasi fondamentali del processo di costruzione di un sito creare un proprio sito o blog con Weebly applicare i principi fondamentali del web design ottimizzare il proprio sito per i motori di ricerca cancellare laccount Weebly

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

Definizione di CMS
Content Management System - Sistema di gestione dei contenuti
Software, a uso interno, sviluppato da alcune organizzazioni negli Stati Uniti al fine di gestire notevoli quantit di pubblicazioni. Studi resi pubblici nel 1995.

Software che si installa su un server web Permette di creare un sito web in maniera guidata Non necessaria la conoscenza di linguaggi di programmazione CMS Specializzati: enciclopedie, blog, forum, CMS Generici: pi flessibili
2003- inizio per blog; ora generico; Pi usato e pi semplice. Info requisiti: http://www.wpitaly.it/wiki/Main/Requisiti 2005- generico; Si pu fare tutto

2001- pi difficile; pi professionale; pi sicuro

Dati 2013

Dati 2014

Aggiornamento: http://w3techs.com/technologies/overview/content_management/all

CMS distribuiti
piattaforme online non necessitano di installazione su Server Web non necessitano di conoscenze di programmazione forniscono dominio e hosting gratis Esempi: AlterVista, Blogger, Google Sites, Jimdo, Yola, Webnote, Weebly, Wix .

Limiti dei CMS distribuiti

Sei sempre ospite I motori di ricerca potrebbero trovarti meno facilmente Visite, velocit e utenti sono limitati Non puoi fare tutto Nessuna garanzia sulla assistenza

Dominio
Il dominio di primo livello l'ultima parte del nome di dominio internet; in altre parole la sigla alfanumerica che segue il 'punto' pi a destra dell'URL; per esempio, l'indirizzo internet di Wikipedia in lingua Italiana it.wikipedia.org e quindi ricade all'interno del dominio di primo livello org. domini di primo livello nazionali costituito da due lettere, per esempio jp per il Giappone e it per l'Italia, o eu per l'Unione Europea; domini di primo livello generici per esempio com per organizzazioni commerciali. Tale suffisso di tre o pi lettere. gov, mil e edu sono riservati rispettivamente al governo, all'esercito e agli enti educativi

Registrazione Dominio
Stranieri:
Domize.com (https://domize.com/) DomainsBot.com (http://www.domainsbot.com/) (anche il whois) Domai.nr (http://domai.nr/)

Italiani:
Register (http://www.register.it/)
Per una lista completa di tutte le estensioni del mondo: http://www.register.it/domains/domain.html

Noamweb (http://www.noamweb.com/domini-registrazione.shtml) DominiOK (http://www.dominiok.it/) Aruba (http://www.aruba.it/)

Prezzo varia a seconda se si registra solo il nome o anche lhosting (spazio)

Fasi principali processo costruzione di un sito

Analisi
Idea Cosa voglio comunicare con il mio sito? CONTENUTI A chi lo voglio comunicare? UTENZA

Progettazione
Contenuti fare inventario Albero del sito mappa, struttura, pagine Schema disegnare carta e penna Grafica semplice e usabile - Dont make me think! (Steve Krug)

Costruzione Test Pubblicazione in rete Manutenzione

Libri consigliati

Data di uscita Ed. it 2000

Data di uscita Ed. it 2002

Data di uscita 3^ ed. 24 dic 2013 http://www.sensible.com

http://www.nngroup.com/

http://webdesignledger.com/inspiration/18-great-examples-of-sketched-ui-wireframes-andmockups

Principi base del web design

Logo e tag-line
Nome chiaro e visibile, logo leggibile Logo deve puntare alla home page Logo in linea con le tematiche Metti unimmagine accanto (anche la tua) Tagline: poche parole che sintetizzino i contenuti del sito I contenuti migliori subito visibili, pochi tra i migliori Navigazione chiara e ben visibile Evidenzia sezione dove ci si trova Sezioni Contatti e Chi devono essere ben visibili

Parte superiore del sito

Menu

Grafica
Non troppa Stile coerente con i contenuti Respiro tra i testi Ordine logico nel layout Evita lo scrolling orizzontale Testa su monitor di diversa risoluzione
Non pesanti e di qualit Nome comprensibile, no 13cdv3c.jpg Almeno 13 pixel Attenzione contrasto con lo sfondo Coerenza colore e font tra pagine

Immagini

Testo

RSS (Really Simple Syndication)

RSS (Really Simple Syndication) uno dei pi popolari formati per la distribuzione di contenuti Web. L'applicazione principale per cui noto sono i flussi RSS che permettono di essere aggiornati su nuovi articoli o commenti pubblicati nei siti di interesse senza doverli visitare manualmente uno a uno.

I distributori del contenuto rendono disponibile il feed e consentono agli utenti di iscriversi.

HTML di una pagina

(linguaggio di contrassegni per ipertesti)
<HTML> <HEAD> <TITLE> Hotelplaza.it - Venezia Hotels, prenotazioni alberghiere </TITLE> <META NAME="description" CONTENT=Elegante hotel nel centro storico di Venezia, con piscina, fitness, ristorante, sala congressi "> <META NAME="keywords" CONTENT="hotel Venezia, Veneto Italia hotels italy Venice vacanza vacanze soggiorno "> </HEAD> <BODY> <H1>.</H1> </BODY> . </HTML>

HTML di una pagina

(linguaggio di contrassegni per ipertesti)
<HTML> <HEAD> <TITLE> La casa della motocicletta: moto usate, componenti per motocicli e accessori per biker </TITLE> <META NAME="description" CONTENT=Servizi online per motociclisti: compravendita moto usate, componentistica per motocicli, accessori e abbigliamento sportivo per i biker "> <META NAME="keywords" CONTENT=moto, motocicletta, motociclette, motociclo, motocicli, motorcycle, bike, biker"> </HEAD> <BODY> <H1>.</H1> </BODY> . </HTML>

Un testo HTML contiene almeno

Tag di apertura

<HTML> <HEAD> . </HEAD> <BODY> </BODY> </HTML>

Tag di chiusura

Testata

Corpo

Esempio 1
<Html> <head> <title>La mia prima pagina web</title> </head> Tag intestazione <body> <h1>La pagina di Samuela</h1> Break=capo riga forzato Ciao a tutti!<br/> Sto creando la mia prima pagina Web! </body> </html>

Esempio 2
<html> <head> <title>Prima prova con figura</title> </head> Attributo Allinea <body> <h1 align="center">Prova di pagina Web con figura</h1>
Source

<p align="center">La figura che segue rappresenta la bandiera italiana</p> Paragrafo <p align="center"><img border="0" src="Immagini/bandiera italiana.gif" width="131" height="88></p>

</body> </html>

Risultato esempio 2

Titolo della pagina

1. Parla al tuo target 2. Deve riassumere in modo chiaro e preciso i contenuti del sito e invogliare il navigatore a cliccare 3. quello che appare sulla barra del browser 4. Definito tramite il tag <TITLE> e </TITLE> 5. Inserire 2 o 3 parole importanti 6. Non superare i 100/150 caratteri 7. Pensalo come lo slogan di una pubblicit

I Meta Tag
Meta-tag description
<meta name=description content= inserire la descrizione della pagina > Inserirlo dopo il <TITLE> Mai pi di 2-3 volte la stessa parola Max 200-300 caratteri Non troppo generico I motori la mettono subito dopo il titolo della pagina

I Meta Tag
Meta-tag Keywords
<meta name=keywords content= inserire le parole chiave> Ricorda la qualit pi che la quantit, quindi coerenza Evita di ripetere pi di due o tre volte la stessa parola Non pi di 1000 caratteri I motori ignorano le virgole Inserisci le parole al singolare e al plurale, con errori comuni Usa frasi di parole chiave per le ricerche con combinazioni di parole Prediligi parole nella versione pi lunga (es. sciare e non sci) Fatti consigliare da amici Osserva i concorrenti

Paragrafi e corpo del testo

Altro elemento significativo per gli spider sono le prime frasi che appaiono nel testo Identificati nel codice:
<H1> </H1>, <H2></H2>

Questi elementi sono tuttavia sotto gli occhi del lettore per cui vanno scelti accuratamente Suggerimento: suddividere gli argomenti per pagina

Popolarit
La qualit dei link che puntano al nostro sito Un sito citato e linkato dalle pagine di Yahoo! sicuramente molto popolare Si pu lavorare in questa direzione pianificando una rete di alleanze e partnership

Trucchi da evitare
Nascondere nel codice HTML parole chiave sotto forma di commenti o scrivendole con colore bianco su fondo bianco Inserire parole non pertinenti allinterno dei MetaTag (es. Sex) Carattere troppo piccolo Ripetizioni nel titolo e nei Meta-Tag Reindirizzamento ad altra pagina

Fidelizzare i visitatori
In primis il valore aggiunto che offri: consigli gratuiti, motore per cercare informazioni Il Gratis importante Per sapere cosa offrire devi analizzare ogni aspetto della tua azienda Ma soprattutto chiedere al cliente (moduli, e-mail,..) Uno o pi contenuti aggiornati (manifestazioni del periodo,) Offerte speciali (stampando il coupon che trovano sul sito..) Possibilit di iscriversi a newsletter e mailing list Giochi a premio Servizi di assistenza online (pre, durante e post vendita)

Esempi di siti belli, meno belli, strani, simpatici, weebly !

1.
2. 3. 4. 5. 6.

http://www.voglioviverecosi.com/
http://www.pescanet.it/ http://www.siamoalcompleto.it/ http://www.viverediscrittura.it/ http://www.austria.info/it http://www.harmattan.it/#

7.
8. 9. 10. 11. 12. 13. 14. 15. 16. 17.

http://www.praglia.it/index1.htm
http://www.amazingospelchoir.com/ http://www.promuoveremusica.it/ http://www.contributiregione.it/ http://www.di6mond.com/ http://www.lagrifoglio.com/ http://miltnificent.weebly.com/artist-page.html http://arrotondonavigando.weebly.com/ http://anconaguideturistiche.weebly.com/index.html http://www.viaggioinindia.net/index.php http://www.rosadeiventialghero.com/index.aspx

18.
19. 20. 21.

http://www.agriturismoalghero.it/contenuto/0/4/11/bb_alghero_ideale_per_famiglie_coppie_e_gruppi_organizzati.aspx
http://donothingfor2minutes.com/ http://www.fallingfalling.com/ http://www.wechoosethemoon.org/