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” Corso “Creare siti web” – Taioli Luca @2012 Internet: I Servizi INTERNET → è la struttura di rete su cui si basano i servizi: • • • Posta elettronica (email) • 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 Il WEB: Come funziona HTTP 1. 2. 3. 4. 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 Corso “Creare siti web” – Taioli Luca @2012 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 255 - Esempio: 195.62.161.94 è 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 195.62.161.94 www.provincia.fc.it http://www.comune.forli.fc.it/servizi/notizie/notizie_homepage.aspx http:// 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 Corso “Creare siti web” – Taioli Luca @2012 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. Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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 [20-100€/anno] - Dominio: a scelta - Spazio disco: illimitato - Spazio disco: limitato Altervista ... Aruba Register … Corso “Creare siti web” – Taioli Luca @2012 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: www.lamiassociazione.altervista.org - Trasferimento con programma FTP - server=lamiassociazione.altervista.org - utente=lamiassociazione - password=******** Corso “Creare siti web” – Taioli Luca @2012 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 • … Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Cosa serve - Server Web per Pubblicare il sito: - Nome di Dominio - Spazio web (Hosting) - Ultima Versione di Joomla: Si scarica dal sito: www.joomla.it – 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 Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Hosting Joomla VhostingSolution http://www.vhosting-it.com/ Hosting99 http://hosting99.it/ Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Hosting Joomla JoomlaHost Http://www.joomlahost.it JoomlaBay Http://www.joomlabay.it Corso “Creare siti web” – Taioli Luca @2012 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 email con i dati di accesso al pannello di amministrazione Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Acquisto Dominio e Hosting Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Acquisto Dominio e Hosting Email Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Sito e Amministrazione Sito Pubblico (Front End) http://www.nomedelsito.it http://localhost/lamiassociazione.it Pannello di Amministraziomne (Back End) http://www.nomedelsito.it/administrator http://localhost/lamiassociaizone.it/administrator Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Pannello di Controllo Pannello di Controllo: http://localhost/lamiassociazione.it/administrator 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 Corso “Creare siti web” – Taioli Luca @2012 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,...) Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Nuovo Template 1 1) Scelta e Download del nuovo Template 2) Installazione del file scaricato 3) Attivazione template come predefinito 2 3 Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Personalizzazione Template Dimensione Font Colori Logo Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Personalizzazione Template Favicon 1) Creare l'immagine formato icona → www.favicon.cc 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Nuovo Articolo Menu Contenuti – Gestione Articoli • Nuovo Articolo Inserire: - Il titolo - La categoria Inserire il Testo dell'articolo - Salva Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Nuovo Articolo Inserire le IMMAGINI Corso “Creare siti web” – Taioli Luca @2012
Scarica
