Le Pagine Web.. Pagine Statiche VS Pagine Dinamiche  Pagine Dinamiche sono pagine in genere gestite da un CMS (Content Management System),ovvero modificare.

Presentazione sul tema: "Le Pagine Web.. Pagine Statiche VS Pagine Dinamiche  Pagine Dinamiche sono pagine in genere gestite da un CMS (Content Management System),ovvero modificare."— Transcript della presentazione:

1 Le Pagine Web.

2 Pagine Statiche VS Pagine Dinamiche  Pagine Dinamiche sono pagine in genere gestite da un CMS (Content Management System),ovvero modificare la pagina senza interagire con il codice.  Pagine Statiche sono dei file in codice HTML che descrivono minuziosamente testi da impaginare, grafica e immagini. Quando l’utente di un sito visita una pagina, ciò che avviene è che il server su cui risiede il sito invia al browser (il programma che utilizzato per navigare, ad esempio Microsoft Explorer) il file HTML; il browser sa decodificare il file, e quindi mostra i contenuti della pagina sullo schermo dell’utente.  Pagine Dinamiche sono pagine in genere gestite da un CMS (Content Management System),ovvero modificare la pagina senza interagire con il codice.  Pagine Statiche sono dei file in codice HTML che descrivono minuziosamente testi da impaginare, grafica e immagini. Quando l’utente di un sito visita una pagina, ciò che avviene è che il server su cui risiede il sito invia al browser (il programma che utilizzato per navigare, ad esempio Microsoft Explorer) il file HTML; il browser sa decodificare il file, e quindi mostra i contenuti della pagina sullo schermo dell’utente.

3 Linguaggi Per Sviluppare Pagine Web  HTML  PHP  Java Script  CSS  JQUERY  HTML  PHP  Java Script  CSS  JQUERY

4 One Page & Responsive  One page e Responsive sono le attuali tecniche per sviluppare un sito web elegante e funzionale.  One page è l’ organizzazione dei moderni siti web dove le informazioni di maggior rilievo si trovano tutte sulla stessa pagina Es.(Home,Portfolio,Contatti)  Responsive rende le pagine compatibili con qualunque tipo di browser e device con cui si visualizza il sito, e ne definisce le regole di formattazione.  One page e Responsive sono le attuali tecniche per sviluppare un sito web elegante e funzionale.  One page è l’ organizzazione dei moderni siti web dove le informazioni di maggior rilievo si trovano tutte sulla stessa pagina Es.(Home,Portfolio,Contatti)  Responsive rende le pagine compatibili con qualunque tipo di browser e device con cui si visualizza il sito, e ne definisce le regole di formattazione.

5 Framework (ambiente di sviluppo)  Un Framework dispone di tutti gli elementi (funzioni,oggetti,routine) necessari allo sviluppo di un’applicazione web o di un semplice sito.  Risolve il problema delle tempistiche e di bug.  Un Framework dispone di tutti gli elementi (funzioni,oggetti,routine) necessari allo sviluppo di un’applicazione web o di un semplice sito.  Risolve il problema delle tempistiche e di bug.

6 Vari Tipi Di Siti Web Ricapitolando...  Statico  Dinamico  E-commerce  Framework  CMS Ricapitolando...  Statico  Dinamico  E-commerce  Framework  CMS

7 E-COMMERCE  Un esempio di siti web è E-BAY, un sito molto complesso sul quale è possibile acquistare oggetti online. *I termini usati non sono per uso pubblicitario.  Un esempio di siti web è E-BAY, un sito molto complesso sul quale è possibile acquistare oggetti online. *I termini usati non sono per uso pubblicitario.

8 Framework & CMS  Siti web realizzati su piattaforme,che permettono di inserire oggetti senza inserire nemmeno una stringa di codice.  Un esempio di questi siti è Weebley. *I termini usati non sono per uso pubblicitario.  Siti web realizzati su piattaforme,che permettono di inserire oggetti senza inserire nemmeno una stringa di codice.  Un esempio di questi siti è Weebley. *I termini usati non sono per uso pubblicitario.

9 e-commerce  Il crescente interesse e l’incremento di fatturato nel settore dimostrano come ormai l’e- commerce abbia conquistato una posizione di primo piano e non possa essere più ignorato dalle imprese.  La creazione di un sito di e-commerce basilare puo avvenire attraverso l’utilizzo del CSM Prestashop : dal nome del dominio all’installazione nel server fino alla gestione di ogni singolo aspetto del portale (ordini, logistica, inventario, efficacia del sito).  Il crescente interesse e l’incremento di fatturato nel settore dimostrano come ormai l’e- commerce abbia conquistato una posizione di primo piano e non possa essere più ignorato dalle imprese.  La creazione di un sito di e-commerce basilare puo avvenire attraverso l’utilizzo del CSM Prestashop : dal nome del dominio all’installazione nel server fino alla gestione di ogni singolo aspetto del portale (ordini, logistica, inventario, efficacia del sito).

10 Prestashop  Dopo aver attivato un dominio, si procede all’attivazione e alla configurazione di un vero e proprio negozio online.  Prima di procedere con l’installazione è necessario scaricare l’ultima versione stabile del CMS.  A questo punto bisogna trasferire i file dal computer locale al Web-host. Utilizzando un client FTP (es. FileZilla) che consenta di caricare o scaricare file su un server.  La connessione al server necessita di tre parametri fondamentali che sono stati forniti dal provider del servizio hosting in fase di registrazione: hostname o indirizzo IP, username e password e di un quarto campo che specifica la Porta del server FTP (default 21).  Dopo aver attivato un dominio, si procede all’attivazione e alla configurazione di un vero e proprio negozio online.  Prima di procedere con l’installazione è necessario scaricare l’ultima versione stabile del CMS.  A questo punto bisogna trasferire i file dal computer locale al Web-host. Utilizzando un client FTP (es. FileZilla) che consenta di caricare o scaricare file su un server.  La connessione al server necessita di tre parametri fondamentali che sono stati forniti dal provider del servizio hosting in fase di registrazione: hostname o indirizzo IP, username e password e di un quarto campo che specifica la Porta del server FTP (default 21).

11 DB del negozio  Prima di passare all’installazione vera e propria di Prestashop, dobbiamo creare un nuovo database da associare al negozio online. Anticipare questo passaggio è importante, in quanto, durante la fase di installazione ci verranno richiesti i parametri di accesso al DB.  Colleghiamoci quindi al database tramite phpMyAdmin, con le credenziali forniteci dal provider in fase di registrazione. Una volta all’interno del servizio portiamoci nella scheda Database e inseriamo il nome che intendiamo associare al nuovo DB  A questo punto siamo pronti per procedere con l’installazione di Prestashop  Prima di passare all’installazione vera e propria di Prestashop, dobbiamo creare un nuovo database da associare al negozio online. Anticipare questo passaggio è importante, in quanto, durante la fase di installazione ci verranno richiesti i parametri di accesso al DB.  Colleghiamoci quindi al database tramite phpMyAdmin, con le credenziali forniteci dal provider in fase di registrazione. Una volta all’interno del servizio portiamoci nella scheda Database e inseriamo il nome che intendiamo associare al nuovo DB  A questo punto siamo pronti per procedere con l’installazione di Prestashop

12 back office  pannello di controllo:  Si tratta del pannello amministrativo del sistema che, in un’interfaccia semplice e intuitiva, racchiude tutte le funzionalità messe a disposizione da PrestaShop per la gestione del portale. Non solo, dunque, applicazioni per la creazione e la manutenzione del sito, ma anche moduli per la gestione dei prodotti, degli ordini, delle vendite e delle spedizioni  Al back office potranno avere accesso solo ed esclusivamente gli amministratori del sistema, nonché i vari attori che prenderanno parte al processo di vendita. Quest’ultimi dovranno essere forniti di nome utente e password e il loro account dovrà essere attivato direttamente dall’amministratore del portale, che, in funzione della figura ricoperta, assocerà ad essi il profilo dovuto, rispettando i grant di accesso al sistema.  pannello di controllo:  Si tratta del pannello amministrativo del sistema che, in un’interfaccia semplice e intuitiva, racchiude tutte le funzionalità messe a disposizione da PrestaShop per la gestione del portale. Non solo, dunque, applicazioni per la creazione e la manutenzione del sito, ma anche moduli per la gestione dei prodotti, degli ordini, delle vendite e delle spedizioni  Al back office potranno avere accesso solo ed esclusivamente gli amministratori del sistema, nonché i vari attori che prenderanno parte al processo di vendita. Quest’ultimi dovranno essere forniti di nome utente e password e il loro account dovrà essere attivato direttamente dall’amministratore del portale, che, in funzione della figura ricoperta, assocerà ad essi il profilo dovuto, rispettando i grant di accesso al sistema.

13 front-office  Gli utenti, siano essi visitatori o acquirenti, avranno accesso solo ed esclusivamente alla parte del sito che va sotto il nome di front-office.  Si tratta della struttura Web che consente l’interazione con gli utenti, meglio intesa come l’insieme delle pagine che compongono il sito Internet (Home, Chi siamo, Scheda prodotto, Form di registrazione, …).  Gli utenti, siano essi visitatori o acquirenti, avranno accesso solo ed esclusivamente alla parte del sito che va sotto il nome di front-office.  Si tratta della struttura Web che consente l’interazione con gli utenti, meglio intesa come l’insieme delle pagine che compongono il sito Internet (Home, Chi siamo, Scheda prodotto, Form di registrazione, …).

14 Il sito  È necessario ora agire sul CMS per cambiare non soltanto l’aspetto esteriore (in gergo il template ) del sito, ma anche e soprattutto i suoi contenuti. Bisognerà inserire, infatti, i propri prodotti, le proprie informazioni, i propri contatti, il proprio logo e così via.  Durante questa fase di configurazione è bene mantenere il sito offline: alcuni utenti potrebbero, infatti, visualizzare un prodotto Web non finito o del tutto errato.  installare un nuovo tema e cambiare l'aspetto visivo del nostro sito. La chiave del successo risiede in una grafica accattivante, ma allo stesso semplice da utilizzare.  Nella Rete sono disponibili tantissimi temi per PrestaShop, tutti pronti all’uso  È necessario ora agire sul CMS per cambiare non soltanto l’aspetto esteriore (in gergo il template ) del sito, ma anche e soprattutto i suoi contenuti. Bisognerà inserire, infatti, i propri prodotti, le proprie informazioni, i propri contatti, il proprio logo e così via.  Durante questa fase di configurazione è bene mantenere il sito offline: alcuni utenti potrebbero, infatti, visualizzare un prodotto Web non finito o del tutto errato.  installare un nuovo tema e cambiare l'aspetto visivo del nostro sito. La chiave del successo risiede in una grafica accattivante, ma allo stesso semplice da utilizzare.  Nella Rete sono disponibili tantissimi temi per PrestaShop, tutti pronti all’uso

15 Il sito  Implementare delle pagine statiche :  Dopo aver modificato l'aspetto grafico del portale, proseguiamo popolando il sito con alcune pagine principali che riguardano l' attività di vendita: chi siamo, note legali, condizioni d'uso e Privacy Policy  Ad ogni pagina è possibile associare una categoria  La grande flessibilità di PrestaShop ruota intorno ai moduli. Si tratta di piccoli programmi che consentono di sfruttare le funzionalità del software in maniera semplice e intuitiva.  Implementare delle pagine statiche :  Dopo aver modificato l'aspetto grafico del portale, proseguiamo popolando il sito con alcune pagine principali che riguardano l' attività di vendita: chi siamo, note legali, condizioni d'uso e Privacy Policy  Ad ogni pagina è possibile associare una categoria  La grande flessibilità di PrestaShop ruota intorno ai moduli. Si tratta di piccoli programmi che consentono di sfruttare le funzionalità del software in maniera semplice e intuitiva.

16 Struttura delle pagine  In linea di massima la maggior parte dei temi è costituita dai blocchi quali:  l’ header, il blocco superiore di ogni pagina che contiene generalmente il menu principale e uno slider di immagini (o una immagine fissa);  il content, la parte centrale della pagina che contiene articoli e descrizioni prodotti;  la column left e la column right, le rispettive colonne sinistre e destre che contengono menu, moduli prodotti e banner pubblicitari;  il footer, la parte terminale della pagina dove generalmente sono contenuti alcuni moduli e soprattutto le informazioni sull’azienda.  In linea di massima la maggior parte dei temi è costituita dai blocchi quali:  l’ header, il blocco superiore di ogni pagina che contiene generalmente il menu principale e uno slider di immagini (o una immagine fissa);  il content, la parte centrale della pagina che contiene articoli e descrizioni prodotti;  la column left e la column right, le rispettive colonne sinistre e destre che contengono menu, moduli prodotti e banner pubblicitari;  il footer, la parte terminale della pagina dove generalmente sono contenuti alcuni moduli e soprattutto le informazioni sull’azienda.

17 CSV  Capita spesso, per chi gestisce negozi di e-commerce online, la necessità di dover caricare sul proprio sito prodotti già registrati all’interno di un altro sw gestionale.  La maggior parte dei programmi gestionali consente di esportate tutto il catalogo prodotti, comprensivo di immagini, in file CSV. Si tratta di un particolare formato che va sotto il nome di Comma Separated Value e consente di importare o esportare dati da un database qualsiasi in un semplice file di testo. La peculiarità risiede proprio nella rappresentazione dei singoli record di tabella, caratterizzati da una linea di testo dove ogni valore è separato dal successivo da un apposito carattere, che può essere ad esempio la virgola o il punto e virgola. Nel caso di una generica tabella Prodotti, contenente il nome, la descrizione e il prezzo, il file CSV potrebbe essere ad esempio così costituito:  NOME,DESCRIZIONE,PREZZO  nomeprodotto1,descrizioneprodotto1,prezzoprodotto1  nomeprodotto2,descrizioneprodotto2,prezzoprodotto2  Capita spesso, per chi gestisce negozi di e-commerce online, la necessità di dover caricare sul proprio sito prodotti già registrati all’interno di un altro sw gestionale.  La maggior parte dei programmi gestionali consente di esportate tutto il catalogo prodotti, comprensivo di immagini, in file CSV. Si tratta di un particolare formato che va sotto il nome di Comma Separated Value e consente di importare o esportare dati da un database qualsiasi in un semplice file di testo. La peculiarità risiede proprio nella rappresentazione dei singoli record di tabella, caratterizzati da una linea di testo dove ogni valore è separato dal successivo da un apposito carattere, che può essere ad esempio la virgola o il punto e virgola. Nel caso di una generica tabella Prodotti, contenente il nome, la descrizione e il prezzo, il file CSV potrebbe essere ad esempio così costituito:  NOME,DESCRIZIONE,PREZZO  nomeprodotto1,descrizioneprodotto1,prezzoprodotto1  nomeprodotto2,descrizioneprodotto2,prezzoprodotto2

18 Statistiche  PrestaShop mette a disposizione dei suoi utenti uno strumento di statistiche semplice da utilizzare ma allo stesso tempo ricco di informazioni, grazie al quale è possibile indirizzare in tempo reale il proprio business  Non appena verrà effettuato un primo acquisto, in alto alla pagina comparirà in prossimità dell’icona a forma di carrello un box rosso con una cifra, indicante il numero delle ultime vendite.  PrestaShop mette a disposizione dei suoi utenti uno strumento di statistiche semplice da utilizzare ma allo stesso tempo ricco di informazioni, grazie al quale è possibile indirizzare in tempo reale il proprio business  Non appena verrà effettuato un primo acquisto, in alto alla pagina comparirà in prossimità dell’icona a forma di carrello un box rosso con una cifra, indicante il numero delle ultime vendite.

19 FINE