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” [email protected] 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, 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 Il WEB: Come funziona HTTP 1. 1. 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 • Localhost significa invece che il sito risiede sul computer in locale 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 → nome del server che ospita il sito (Dominio) /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 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. 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 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 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 - 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 – 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 • … Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 Il WEB: Il Browser Barra del Titolo Barra dei Menu Schede Browser Barra degli Indirizzi Pagina web Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 WEB – Esempi siti Web Logo e Testata Menu Principale Menu Secondario Contenuto principale (Articolo) Corso “Creare siti web” – Taioli Luca @2012 WEB – Esempi siti Web Logo e Testata Menu Principale Contenuto principale (Articoli) Corso “Creare siti web” – Taioli Luca @2012 WEB–– Esempi Esempi siti WEB sitiWeb Web Contenuto principale (Articoli) Estensioni Logo e Testata Menu Principale Menu Secondario Corso “Creare siti web” – Taioli Luca @2012 WEB – Il nostro sito Web Logo e Testata Menu Principale Menu Secondario Contenuto principale Corso “Creare siti web” – Taioli Luca @2012 Estensioni 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 [50-100€/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à Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Cosa serve - Servizio Hosting compatibile con Joomla: - Nome di Dominio - Spazio Web - Ultima Versione di Joomla: Si scarica dal sito: www.joomla.it – 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 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 del Dominio (indirizzo web del sito) B) Propri dati di Registrazione C) Scelta della Configurazione (Tagli di costo e servizi) 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: Acquisto Dominio e Hosting 1) Scelta del Nome del Sito 2) Dati per la Registrazione Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Acquisto Dominio e Hosting 3) Ricezione Email per la conferma dell'Attivazione del sito Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Acquisto Dominio e Hosting 4) Attivazione di Joomla: Dal Pannello di controllo di Altervista → Installa nuove applicazioni... Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Acquisto Dominio e Hosting 5) Selezione dell'applicazione Joomla 6) Ricezione Mail con i dati di accesso al Pannello di Amministrazione di Joomla 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 Amministrazione (Back End) → http://www.nomedelsito.it/administrator http://localhost/lamiassociazione.it/administrator - Utente= admin - Password=99 - Template base - Senza contenuti Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: 4) Pannello di Controllo Pannello di Controllo: http://localhost/lamiassociazione.it/administrator 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 Corso “Creare siti web” – Taioli Luca @2012 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… 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 [dal sito www.joomla.it] 2) Installazione del file scaricato (c:\corsoweb\joomla\template\...zip) 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) 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 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'anteprima → Estensioni – Gestione Template / scheda Template – Visualizzare l'anteprima 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 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 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 JOOMLA: Cosa serve 1) SPAZIO WEB (Hosting) & NOME SITO (Dominio) – Gratuito: Altervista, Jowe, JoomlaFree,... – Pagamento: Joomlahost, Joomlaspace,... A) Registrazione e dati personali B) Ricezione Email 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 Corso “Creare siti web” – Taioli Luca - Votazione articoli - Sondaggi - News @2012 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 Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: ALLEGATI - INSTALLARE l'Estensione attachments-3.0.2 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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 Corso “Creare siti web” – Taioli Luca @2012 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... Corso “Creare siti web” – Taioli Luca @2012 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} Corso “Creare siti web” – Taioli Luca @2012 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: http://nuovosito/kickstart.php - 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 Corso “Creare siti web” – Taioli Luca @2012 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: www.Joomla.it Corso “Creare siti web” – Taioli Luca @2012 JOOMLA: Installazione in Locale 3) Copiare il file jommla257stable.zip → nello spazio web c:\xampp\htdocs\ 6) Sito WEB: http://localhost/miosito.it/ 4) Scompattare e rinominare la cartella: “IlMioSito.it” 5) Installazione WEB: http://localhost/miosito.it 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 email: [email protected] – utente=lasciare admin – password=99 e confermare 99, premere avanti 7) cliccare sul bottone: elimina cartella installation Corso “Creare siti web” – Taioli Luca 7) Pannello di Controllo: http://localhost/miosito.it/administrator @2012 JOOMLA: LINK UTILI Programma Xampp Logo http://www.apachefriends.org/it/xampp-windows.html http://www.onlinelogomaker.com/free http://supalogo.com/ http://creatr.cc/creatr/ JOOMLA www.joomla.org www.joomla.it Favicon http://www.genfavicon.com http://extensions.joomla.org/ Tabella Colori: Hosting joomla * gratuiti http://www.dmi.unict.it/~cantone/HomePageHTML/Colori.html http://www.altervista.org http://www.jowe.it http://www.joomlafree.it/dnshst/jmfree/hosting-joomla-free.jsp * pagamento http://www.joomlahost.it/dnshst/jm/index.jsp http://www.vhosting-it.com/cms-hosting-low-cost-wordpress-joomla-magento.php http://www.hostingjoomlaprofessionale.com/ http://www.ergonet.it/ http://www.itroom.it Template 2.5 http://www.joomla.it/anteprima-template-16.html http://www.joomla.it/anteprima-template-16/5404-allrounder-j25v12.html Corso “Creare siti web” – Taioli Luca @2012
Scarica
