Corso Creare Siti WEB

Transcript

1 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 gtaioli@gmail.com

2 Internet: I Servizi INTERNET è la struttura di rete su cui si basano i servizi: Posta elettronica ( ) Trasferimento file (ftp, p2p) Navigazione tra pagine ipertestuali (web o 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 pagine di Ipertesto: Pagine Multimediali Testo, Immagini, Filmati, Musica... Consultabili in maniera non sequenziale Link verso altre pagine

3 Il WEB: Le Basi HTTP HyperText Transfer Protocol Protocollo di comunicazione tra client e 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 istruzioni (tag) <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 Localhost significa invece che il sito risiede sul computer in locale protocollo di trasmissione di ipertesti Www indica che si tratta di un documento web comune.forli.fc.it nome del server che ospita il sito (Dominio) /servizi/notizie/ sottosito notizie_homepage.aspx --> pagina web da visualizzare

6 Il WEB: Documento HTML HTML Ogni pagina web è creata con il linguaggio HTML Un insieme di istruzioni (tag) che indicano al programma Browser COSA e COME visualizzare sul monitor del computer 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 Ogni pagina web ha un corrispondente documento html Il Server Web non ha un archivio di documenti html genera i documenti html su richiesta e li invia al Browser Moduli sw aggiuntivi: Un linguaggio di script: Php, Asp, cc.. Un database dove sono memorizzati i contenuti Sito di piccole dimensioni, poche pagine Contenuto che non cambia Sito di medie-grandi dimensioni, molte pagine Contenuto che cambia spesso Funzionalità aggiuntive Creazione tramite programma editor in locale Aggiornamento tramite programma FTP Creazione e Aggiornamento tramite Browser

8 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 - Trasferimento con programma FTP - server=lamiassociazione.altervista.org - utente=lamiassociazione - password=********

9 JOOMLA - Introduzione CMS: Sistema di Gestione dei Contenti Applicazione web: crea Siti Web Dinamici E' Open Source Non richiede la conoscenza del linguaggio html Aggiornamento del sito via Web Estensioni Gestione Documenti Gallerie di immagini e video Mappe Gestione Utenti News Sistemi di gestione Banner Multilingua

10 WEB Il Browser Server web: PC con il browser Ospita la pagine web che formano il sito L utente digita il nome del sito web che vuole visitare Il browser attraverso la rete internet si collega al server web Preleva la prima pagina del sito La visualizza sul monitor PC e Browser E' un programma che consente la visualizzazione e la navigazione tra le pagine web Il Browser esegue le istruzioni html che compongono la pagina web Internet Explorer Fire Fox Chrome Opera Server web

11 Il WEB: Il Browser Barra del Titolo Barra dei Menu Schede Browser Barra degli Indirizzi Pagina web

12 Il WEB: Siti Internet Scopo di un sito web farsi conoscere comunicare, informare vendere e guadagnare condividere una passione promuovere un'attività... Tipologie di siti web Istituzionali Portali Blog - Forum Commercio elettronico Motori di ricerca

13 JOOMLA: Creazione di un Sito Web 1. Perchè creare un sito web? - promuovere un'attività - informare - condividere - farsi conoscere... Una idea o una esigenza Una connessione a banda larga 2. Progettare il sito: - struttura delle pagine web - bozza dei contenuti - preparare le immagini Un po' di fantasia Carta e penna Un programma di grafica 3. Scegliere Dominio e Hosting: - indirizzo web del sito - fornitore dello spazio web 4. Realizzare il sito: -scegliere e personalizzare la grafica (template) - scrivere e pubblicare gli articoli (menu) - inserire nuove funzionalità (estensioni) Joomla

14 JOOMLA: 2) Progettare il sito Web 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... Attività Preliminari di Analisi: - Scegliere la Struttura e personalizzare la Grafica del sito Testata e Logo Menu nella colonna sinistra Contenuto Principale al centro Pie pagina - 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) C:\corsoweb\joomla\sito lamiassociazione.doc

15 WEB Esempi siti Web Logo e Testata Menu Principale Menu Secondario Contenuto principale (Articolo)

16 WEB Esempi siti Web Logo e Testata Menu Principale Contenuto principale (Articoli)

17 WEB Esempi Esempi siti WEB sitiweb Web Contenuto principale (Articoli) Estensioni Logo e Testata Menu Principale Menu Secondario

18 WEB Il nostro sito Web Logo e Testata Menu Principale Menu Secondario Contenuto principale Estensioni

19 Sito Web: 3) 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: spazio disco su un server internet che ospita e pubblica le nostre pagine web Soluzioni GRATUITE Soluzioni A PAGAMENTO [ /anno] - Dominio del tipo: xxx.server.it si può scegliere solo xxx - Dominio: a scelta - Spazio disco: limitato - Spazio disco: illimitato Altervista... Aruba Register Verifica disponibilità

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

21 JOOMLA: Hosting Joomla VhostingSolution Hosting99

22 JOOMLA: Hosting Joomla JoomlaHost JoomlaBay

23 JOOMLA: Acquisto Dominio e Hosting A) Scelta del Dominio (indirizzo web del sito) B) Propri dati di Registrazione C) Scelta della Configurazione (Tagli di costo e servizi) D) Ricezione con i dati di accesso al pannello di amministrazione

24 JOOMLA: Acquisto Dominio e Hosting

25 JOOMLA: Acquisto Dominio e Hosting

26 JOOMLA: Acquisto Dominio e Hosting 1) Scelta del Nome del Sito 2) Dati per la Registrazione

27 JOOMLA: Acquisto Dominio e Hosting 3) Ricezione per la conferma dell'attivazione del sito

28 JOOMLA: Acquisto Dominio e Hosting 4) Attivazione di Joomla: Dal Pannello di controllo di Altervista Installa nuove applicazioni...

29 JOOMLA: Acquisto Dominio e Hosting 5) Selezione dell'applicazione Joomla 6) Ricezione Mail con i dati di accesso al Pannello di Amministrazione di Joomla

30 JOOMLA: Sito e Amministrazione Sito Pubblico (Front End) Pannello di Amministrazione (Back End) Utente= admin - Password=99 - Template base - Senza contenuti

31 JOOMLA: 4) Pannello di Controllo Pannello di Controllo: CONTENUTO MENU - 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

32 JOOMLA: Creazione delle Pagine del Sito Aspetto GRAFICO 1) 2) Installare un nuovo Template Personalizzare il nuovo Template 1) Colori Dimensioni - Immagini Creazione del CONTENUTO 1) creare le Categorie per organizzare il contenuto: 2) creare gli Articoli che rappresentano il contenuto: Testo Immagini Link 3) creare il Menu e le Voci di Menu associate agli articoli 4) creare il Modulo per visualizzare il menu Estendere le FUNZIONALITA 1) Installare nuove Estensioni 1) Cerca, Contatti, Calendario eventi, ecc

33 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,...)

34 JOOMLA: Nuovo Template 1 1) Scelta e Download del nuovo Template [dal sito 2) Installazione del file scaricato (c:\corsoweb\joomla\template\...zip) 3) Attivazione template come Predefinito 2 3

35 JOOMLA: Personalizzazione Template Dimensione Font Colori Logo

36 JOOMLA: Personalizzazione Template Favicon 1) Creare l'immagine formato icona 2) Scaricare l'immagine 3) Inserirla 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

37 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'anteprima Estensioni Gestione Template / scheda Template Visualizzare l'anteprima

38 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

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

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

41 JOOMLA: Nuovo Articolo Inserire le IMMAGINI

42 JOOMLA: Cosa serve 1) SPAZIO WEB (Hosting) & NOME SITO (Dominio) Gratuito: Altervista, Jowe, JoomlaFree,... Pagamento: Joomlahost, Joomlaspace,... A) Registrazione e dati personali B) Ricezione con i dati di accesso C) Pannello di Amministrazione 2) GRAFICA Scelta nuovo Template Personalizzazione template 3) CONTENUTO Definizione delle Categorie Creazione Articoli Creazione Menu e Voci di Menu Posizionamento tramite Modulo Menu 4) UTENTI Creazione Gruppi, Utenti Aree riservate 5) ESTENSIONI Allegati Slide Show Galleria Fotografica - Contatti - Mappe di Google - Diario degli Ospiti - Votazione articoli - Sondaggi - News

43 JOOMLA: Le Estensioni - Slide Show - Weblink - Allegati - Sondaggi - Cerca - Banner - Contatti - Guestbook - Mappe - Utenti e permessi - Percorso - Login e Recapcha - Votazione - Utenti connessi - Commenti - Ultimi utenti registrati - Galleria fotografica e video - Calendario eventi - Ultimi articoli inseriti - Forum - Articoli più letti - Multilingua - News - Backup - News Feed

44 JOOMLA: ALLEGATI - INSTALLARE l'estensione attachments e la sua Lingua italiana si trovano in c:\corsoweb\joomla\estensioni\allegati - MODIFICARE l'articolo Chi siamo: - Aggiungi allegato e selezionare: statuto.pdf - Descrizione=scarica il documento - Pubblicato=si - Accesso=public

45 JOOMLA: SLIDEShow - CARICARE le immagini: copiare la cartella c:\corsoweb\joomla\media\ss_home \htdocs\lamiassociazione.it\images\ - INSTALLARE le Estensioni: si trovano in c:\corsoweb\joomla\estensioni\slideshow Plugin: Modules-Anywhere Modulo: Nivo Slideer e abilitarlo - CONFIGURARE il modulo NivoSlider - titolo=nascosto - posizione=advert6 - assegnazione Menu: solo sulla pagina Home - opzioni base: slideshow directory=images/ss_home/ - MODIFICARE l'articolo Home: - cancellare l'immagine - inserire un nuovo modulo: NivoSlider - PERSONALIZZARE il modulo NivoSlider per centrarlo - lo inseriamo all'interno di una tabella: 1 colonna e 1 riga

46 JOOMLA: CONTATTI - NUOVA Categoria: titolo=responsabile - NUOVO Contatto: - nome, utente, categoria, descrizione - Informazioni per questo contatto: immagine - NUOVA Voce di Menu: - tipo=singolo contatto - contatto=<nome> - nome voce=contatti

47 JOOMLA: GOOGLEMAPS - INSTALLARE il Componente e la Lingua Italiana: si trovano in c:\corsoweb\joomla\estensioni\phocamaps\componente - INSTALLARE il Plugin e la Lingua Italiana si trovano in c:\corsoweb\joomla\estensioni\phocamaps\plugin Copiare il file.ini \htdocs\lamiassociazione.it\administrator\language\it-it Abilitare il Plugin - CREARE una nuova Mappa: - titolo=mappa - impostare le coordinate - zoom=12 - lingua mappa=it - descrizione=la nostra mappa - NUOVA Voce di Menu: - tipo=phocamaps /vista mappa - selezionare la mappa - titolo=mappa - NUOVO Indicatore: - titolo=lamiassociazione - impostare le coordinate - selezionare la mappa - Testo: noi siamo qui...

48 JOOMLA: GALLERIA FOTOGRAFICA - CARICARE le immagini: copiare la cartella c:\corsoweb\joomla\media\galleria \htdocs\lamiassociazione.it\images - INSTALLARE le Estensioni: si trovano in c:\corsoweb\joomla\estensioni\galleria Plugin SimpleImageGallery Abilitare il Plugin - CREARE un Nuovo Articolo: - titolo=galleria - testo=galleria fotografica: {galleria}galleria{/galleria} - NUOVA Voce di Menu: - tipo=singolo articolo - selezionare l'articolo: galleria - titolo=galleria fotografica - opzioni articolo: nascondere tutto - VIDEO YOUTUBE {youtube}<codice>{/youtube} - VIDEO FLV {flv}<nomefile>{/flv}

49 JOOMLA: BACKUP - Estensione utile per copiare tutto il sito, necessaria per: Backup Trasferimento del sito su altro server INSTALLARE l' Estensione: Akeeba si trova in c:\corsoweb\joomla\estensioni\backup - FUNZIONAMENTO: - avviare la configurazione guidata per effettuare un controllo generale - avviare il backup - il file del backup (con estensione.jpa) si trova nella cartella: \htdocs\lamiassociazione.it\administrator\components\com_akeeba\backup\ Trasferimento del sito su altro server: - effettuare il backup - copiare il file del backup (*.jpa) sul nuovo server nella cartella /htdocs/nuovosito - copiare il contenuto della cartella kickstart (si trova in c:\corsoweb\joomla\estensioni\backup ) All'interno della cartella /htdocs/nuovosito sul nuovo sito - tramite il browser: - selezionare il file di backup e poi start - attendere circa 15 minuti - run installer - confermare con next le opzioni di base e infine rimuovere la cartella installation

50 JOOMLA: Installazione in Locale 1) Servizi WEB Installare il programma XAMPP Attivare in xampp i servizi: Apache e Mysql 2) Joomla scaricare l'ultima versione (2.5.7) Dal sito:

51 JOOMLA: Installazione in Locale 3) Copiare il file jommla257stable.zip nello spazio web c:\xampp\htdocs\ 6) Sito WEB: 4) Scompattare e rinominare la cartella: IlMioSito.it 5) Installazione WEB: 1) Lingua : premere avanti 2) Controlli : premere avanti 3) Licenza : premere avanti 4) Database : tipo database: scegliere Mysql nome host: lasciare quello proposto (localhost) nome utente = root password: lasciare vuoto nome database=miosito altri campi lasciare invariati, premere avanti 5) FTP : premere avanti 6) Configurazione : nome sito=miosito la tua xxx@libero.it utente=lasciare admin password=99 e confermare 99, premere avanti 7) cliccare sul bottone: elimina cartella installation 7) Pannello di Controllo:

52 JOOMLA: LINK UTILI Programma Xampp Logo JOOMLA Favicon Tabella Colori: Hosting joomla * gratuiti * pagamento Template