Corso Creare Siti WEB

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Corso Creare Siti WEB"

Tiziano Pozzi
8 anni fa
Visualizzazioni

1 Corso Creare Siti WEB INTERNET e IL WEB Funzionamento Servizi di base HTML CMS JOOMLA Installazione Aspetto Grafico Template Contenuto Articoli Immagini Menu Estensioni Sito di esempio: Associazione LaMiassociazione

2 Internet: I Servizi INTERNET è la struttura di rete su cui si basano i servizi: Posta elettronica ( ) Trasferimento file (ftp) Web (www) Voip... Nasce negli anni 60 in ambito militare Obiettivo: sistema di comunicazione SERVER: i computer che forniscono i servizi Server web che ospita il sito CLIENT: i computer che richiedono i servizi Nostro pc tramite il browser Il WEB è uno dei servizi di Internet E il più famoso dei servizi basati sulla rete Internet www = World Wide Web ( Ragnatela mondiale ) Grande deposito di informazioni e servizi Nasce negli anni 90 Obiettivo: condividere informazioni Ogni Sito Web è composto da più pagine di Ipertesto: Pagine Multimediali Testo, Immagini, Filmati, Musica... Consultabili in maniera non sequenziale Link

3 Il WEB: Le Basi HTTP HyperText Transfer Protocol Protocollo di comunicazione client-server Per la trasmissione di documenti ipertestuali Basato sul protocollo tcp URL - Uniform Resource Locator Indirizzo che identifica univocamente una risorsa sulla rete HTML HiperText Markup Language Linguaggio con cui sono create le pagine web È una combinazione di testo e tag (istruzioni) <html>, <body>, <p>, <div> Il Browser interpreta le istruzioni contenute in un documento HTML e visualizzare la pagina web

4 Il WEB: Come funziona HTTP Dal nostro pc indichiamo la pagina web Il browser richiede al server la pagina Il server invia al pc la pagina richiesta Il browser visualizza la pagina sul monitor HTTP: i dati viaggiano in chiaro HTTPS: le trasmissioni sono crittografate

5 Il WEB: Indirizzi Internet URL Ogni computer connesso alla rete Internet è identificato dal suo Indirizzo univoco: INDIRIZZO Internet: - Numero composto da 4 cifre: xxx.xxx.xxx.xxx - Ogni cifra è un numero da 0 a Esempio: è l indirizzo del sito della Provincia di FC DNS (Domain Name System) Servizio che associa ad ogni indirizzo un nome univoco (Dominio), più facile da ricordare: Per esempio protocollo di trasmissione di ipertesti www: indica che si tratta di un documento web comune.forli.fc.it: dominio: nome del server che ospita il sito /servizi/notizie/: sottosito notizie_homepage.aspx: pagina web da visualizzare

Il WEB: Documento HTML HTML Ogni pagina web è creata con il linguaggio HTML Un insieme di istruzioni (tag) che indicano cosa e come visualizzare sul monitor del pc tramite il Browser

6 Il WEB: Documento HTML HTML Ogni pagina web è creata con il linguaggio HTML Un insieme di istruzioni (tag) che indicano cosa e come visualizzare sul monitor del pc tramite il Browser Testo: Tabelle: Link: Immagini: <p>, <div> <table> <a href= > <img src= > Il compito di un web browser è di interpretare un documento HTML e visualizzare la pagina web da esso descritta.

7 Sito Web: STATICO / DINAMICO STATICO DINAMICO Il Server Web ha un archivio di documenti html che invia al Browser su richiesta Il Server Web non ha un archivio di documenti html genera i documenti html su richiesta e li invia al Browser Sito di piccole dimensioni, poche pagine Creazione tramite programma editor in locale Aggiornamento tramite programma FTP Moduli sw aggiuntivi: Un linguaggio di script: Php, Asp, cc.. Un database dove sono memorizzati i contenuti Sito di grandi dimensioni, molte pagine Funzionalità aggiuntive Creazione e Aggiornamento tramite Browser

8 Sito Web: PUBBLICAZIONE Per rendere raggiungibile il nostro Sito Web da tutti i pc collegati ad internet occorre Pubblicarlo: Nome di Dominio: il nome che identifica univocamente il nostro sito Spazio web (Hosting): ): spazio disco su un server internet che ospita e pubblica le nostre pagine web Soluzioni GRATUITE - Dominio del tipo: xxx.yyyy.it dove però yyyy è fisso Soluzioni A PAGAMENTO [ /anno] - Dominio: a scelta - Spazio disco: illimitato - Spazio disco: limitato Altervista... Aruba Register

css - Immagini cartella IMG 2) PUBBLICAZIONE - Registrazione su Altervista - Dominio: www.

9 Sito Web STATICO: LaMiassociazione 1) CREAZIONE - Documenti html, uno per ogni pagina che compone il sito web: index.html chi.html dove.html cosa.html - Foglio di Stile: foglio.css - Immagini cartella IMG 2) PUBBLICAZIONE - Registrazione su Altervista - Dominio: - Trasferimento con programma FTP - server=lamiassociazione.altervista.org - utente=lamiassociazione - password=********

10 JOOMLA - Introduzione CMS: Sistema di Gestione dei Contenti Applicazione web: crea Siti Web Dinamici Non è necessario il linguaggio html E' Open Source Estensioni Gestione Documenti Gallerie di immagini e video Mappe Gestione Utenti News Sistemi di gestione Banner Multilingua

11 JOOMLA: Cosa serve - Server Web per Pubblicare il sito: - Nome di Dominio - Spazio web (Hosting) - Ultima Versione di Joomla: Si scarica dal sito: Gratuita In italiano Installazione in locale: XAMPP Ambiente Server Servizio Apache (php) Servizio Database Spazio web: c:\xampp\htdocs Requisiti Hosting: - Modulo per linguaggio Php - Modulo Database VhostingSolution Hosting99 JoomlaHost JoomlaBay JoomlaProvider JoomlaSpace Jowe Altervista

12 JOOMLA: Hosting Joomla VhostingSolution Hosting99

13 JOOMLA: Hosting Joomla JoomlaHost JoomlaBay

14 JOOMLA: Acquisto Dominio e Hosting A) Scelta e Verifica disponibilità del Dominio B) Scelta della Configurazione Tagli di costo e servizi C) Conferma acquisto [aggiungi al carrello] D) Ricezione con i dati di accesso al pannello di amministrazione

15 JOOMLA: Acquisto Dominio e Hosting

16 JOOMLA: Acquisto Dominio e Hosting

17 JOOMLA: Sito e Amministrazione Sito Pubblico (Front End) Pannello di Amministraziomne (Back End)

JOOMLA: Creazione di un Sito Web Creare un Sito Web significa: - Scegliere e personalizzare l'aspetto grafico - Preparare e scrivere gli articoli, e aggiornarli periodicamente - Scegliere, preparare

18 JOOMLA: Creazione di un Sito Web Creare un Sito Web significa: - Scegliere e personalizzare l'aspetto grafico - Preparare e scrivere gli articoli, e aggiornarli periodicamente - Scegliere, preparare e caricare le immagini e i contenuti multimediali - Promuovere il sito, renderlo visibile ai motori di ricerca - Gestire vendita di spazio (banner) Analisi iniziali: prima di iniziare la creazione del sito occorre aver chiaro: - Le Finalità e per quali utenti creare il sito - Cosa si vuole pubblicare - La Struttura grafica, dove posizionare i menu, le immagini, ecc... ATTIVITA' INIZIALI Scegliere la struttura del sito * Testata * Menu: nella colonna a sinistra * Contenuto Principale nella parte centrale * Pie pagina Decidere la modalità di navigazione (menu) Scrivere una bozza dei contenuti Preparare e catalogare le immagini

JOOMLA: Pannello di Controllo Pannello di Controllo: http://localhost/lamiassociazione.it/administrator MENU CONTENUTO - ARTICOLI: sono la parte principale della pagina web: testo, immagini.

19 JOOMLA: Pannello di Controllo Pannello di Controllo: MENU CONTENUTO - ARTICOLI: sono la parte principale della pagina web: testo, immagini... - CATEGORIE: gli articoli sono organizzati in categorie in base alla loro tipologia - MEDIA: è possibile catalogare e gestire immagini, suoni, video... - Ogni articolo per essere visibile sul sito deve essere associato ad una voce di menu - Si possono creare diversi menu - Composti da diverse voci di menu UTENTI ESTENSIONI - Gli utenti sono necessari per la creazione dei contenuti del sito - Si possono creare gruppi di utenti a cui impostare determinati permessi - Aree riservate Per arricchire il sito di nuove funzionalità - COMPONENTI: applicazioni - MODULI: blocchi di funzionalità - PLUGIN: piccole applicazioni - TEMPLATE: modello grafico - LINGUA: per un sito multilingua

20 JOOMLA: Aspetto GRAFICO L'architettura di Joomla consente di separare Contenuto e Grafica Contenuti e Aspetto Grafico sono indipendenti si può in qualunque momento cambiare la grafica tramite i Template il contenuto rimane invariato Template Il Template determina l'aspetto Grafico - definisce come sono visualizzati gli oggetti (articoli, menu, loghi,...) che costituiscono la pagina - in termini di posizione (dove) - in termini di aspetto (colore, font, dimensione,...)

21 JOOMLA: Nuovo Template 1 1) Scelta e Download del nuovo Template 2) Installazione del file scaricato 3) Attivazione template come predefinito 2 3

22 JOOMLA: Personalizzazione Template Dimensione Font Colori Logo

23 JOOMLA: Personalizzazione Template Favicon 1) Creare l'immagine formato icona 2) Scaricare l'immagine 3) Inserire la nuova immagine nel Template Sostituire il file favicon.ico che si trova nella cartella: <spazioweb>lamiassociazione.it/template/<nometemplate> Cancellare la cache del browser: Strumenti/Opzioni/Avanzate/Rete/Cancella adesso Riavviare il Browser

24 JOOMLA: Visualizzare le Posizioni POSIZIONI Il Template definisce anche le posizioni all'interno del sito dove inserire gli oggetti Estensioni Gestione Template / Opzioni Abilitare l'anteprina Estensioni Gestione Template / scheda Template Visualizzare l'anteprina

25 Le IMMAGINI Formato.gif immagini animate o trasparenze.jpg fotografie.png qualitativamente migliore Ridimensionare le immagini prima di pubblicarle! Foto: 4 Mb pixel Dimensione reale Ridimensionata Si può utilizzare il sw gratuito: MS Paint

ARTICOLI Creazione degli articoli che formeranno le pagine web 4) GESTIONE MENU

26 JOOMLA: Il Contenuto 1) GESTIONE MEDIA Preparare e catalogare le immagini 2) GESTIONE CATEGORIE Creare le categorie per organizzare gli articoli 3) GESTIONE ARTICOLI Creazione degli articoli che formeranno le pagine web 4) GESTIONE MENU Creazione voci di menu per la pubblicazione degli articoli precedentemente creati

27 JOOMLA: Nuovo Articolo Menu Contenuti Gestione Articoli Nuovo Articolo Inserire: - Il titolo - La categoria Inserire il Testo dell'articolo - Salva

28 JOOMLA: Nuovo Articolo Inserire le IMMAGINI

Documenti analoghi

Corso Creare Siti WEB

Corso Creare Siti WEB INTERNET e IL WEB Funzionamento Servizi di base Linguaggio HTML C.M.S. JOOMLA Installazione Aspetto Grafico Template Contenuto Articoli Immagini Menu Estensioni Sito di esempio: LaMiassociazione.it