Progettazione e sviluppo WEB - Laboratorio Libero · Conoscenza del linguaggio CSS (per il layout:...

Progettazione e sviluppo WEB

Antonio Gallo

[email protected]

[email protected]

mailto:[email protected]

mailto:[email protected]

Cosa significa progettare e sviluppare un sito web?


✗ Progettazione (come deve essere fatto)✗ Grafica e fotografia

✗ Progr. HTML – Front-end (HTML)✗ Progr. lato server – Back-end (PHP + MYSQL)

✗ Scrittura e revisione dei testi✗ Infrastruttura (Server)

✗ Test, collaudo e pubblicazione✗ Promozione (SEO)


✗ Gestione e-mail istituzionali✗ Newsletter

✗ Blog promozionale✗ Integrazione Social (Facebook, etc)

✗ Servizio fotografico✗ Marketing

✗ Pagamento online✗ Integrazione con gestionale aziendale

✗ Integrazione con App dedicata✗ Altro...

E molto altro...


✗ Basi della comunicazione web✗ Introduzione alla programmazione lato client

(HTML e correlati)✗ Introduzione alla programmazione lato server

(PHP e correlati)✗ Basi di SEO, basi di integrazione con Social

Network

Che cosa faremo in questo modulo

✗ Blog✗ Sito web di vetrina

✗ Quotidiano✗ E-commerce

✗ Area riservata online✗ Agenda online

✗ Forum✗ ...

Sito internet?

http://www.lyonaeroports-t1.com/enhttp://www.barlasapaydin.com/#!/

http://www.windowsofnewyork.com/#aboutwofnyhttp://orangina.eu/

Alcuni siti estremi

http://www.lyonaeroports-t1.com/en

http://www.barlasapaydin.com/#!/

http://www.windowsofnewyork.com/#aboutwofny

http://orangina.eu/

✔ Struttura home page✔ Navigazione (menù in alto)

✔ Categorizzazione dei prodotti: pagine, sotto pagine

✔ Pagine istituzionali: l’azienda, contatti, altro✔ Sezioni correlate: news, eventi, referenze

✔ Area riservata per i clienti?


✔ Sviluppata da un grafico (designer o creativo)✔ Creazione mockup da presentare al cliente✔ Creazione finale della grafica di tutto il sito✔ Creazione banner e icone✔ Eventuale servizio fotografico

Grafica e fotografia

Glossario

Browser: il programma che si usa per navigare internet e vedere un sito. Ex: Chrome, Firefox,

Edge, IE, Safari

Glossario

Client: il programma/computer che “fa una richiesta” attraverso una rete (internet / locale / VPN). Ex: client di posta elettronica, browser

Server: il computer “che prende in carico la richiesta del client e risponde” (ad esempio il

computer dove è installato il sito internet)

Glossario

Glossario

Front-end: la parte pubblica del sito (quella che vede chi si collega all’indirizzo del sito web con un

browser)

Back-end: la parte amministrativa del sito web, riservata a chi conosce login e password, che

permette la gestione dei contenuti del sito

Glossario

Glossario

Sito statico: tutti i contenuti sono scritti direttamente all’interno di file .html. Non ha

backend (puro front-end)

Sito dinamico: i contenuti della parte front-end sono generati da un software che interpreta le richieste e genera l’HTML richiesto (è spesso presente un back-end con accesso riservato)

Glossario

Linguaggi lato client

“Di cosa è fatto un sito web?”

HTML + CSS + Javascript

Flash

HTML

HTML (HyperText Markup Language):

linguaggio di markup per descrivere la struttura di un sito web (1993 – 2017)

Versione corrente: HTML5

HTML

<html><head>

<title>Il mio sito web</title></head><body>

Contenuto del sito web</body>

</html>

CSS

CSS (Cascading Style Sheets): linguaggio usato per la formattazione di un sito web (strutturazione

e decorazione grafica)

Versione corrente: CSS3

CSS

body{

color:#333;background-color:#eee;margin:10px;

}

Javascript

Javascript: linguaggio lato client (cioè eseguito dal browser) che permette di interagire con gli

elementi della pagina.

✗ Animazioni✗ Eventi

✗ Processi in background✗ Altro

Javascript

$(“a”).click(function(){Console.log(“Hai cliccato!!”);

});

Approfondimento lato client / server

Sono quei linguaggi che vengono eseguiti dal CLIENT (quindi dal vostro computer)

✗ HTML : Struttura✗ CSS : Aspetto

✗ Javascript : Animazioni e user interaction

Linguaggi lato client

Sono quei linguaggi che vengono eseguiti dal server e che generano il codice HTML che verrà

poi “trasformato in sito internet” dal vostro browser.

Linguaggi lato server

✗ Linguaggio vero e proprio: PHP (PYTHON, C#, RUBY, …)

✗ Database: MYSQL (MSSQL, POSTRESQL, ...)

Linguaggi lato server

Creazione dell’HTML + CSS + Javascript di tutto il sito

Sviluppo front-end

Competenze:

✔ Conoscenza del linguaggio HTML (versione 5)✔ Conoscenza del linguaggio CSS (per il layout: font, colori, sfondi, etc …. animazioni con CSS3)

✔ Conoscenza del linguaggio Javascript per le animazioni e la user interaction (jQuery)

✔ Utilizzo di plugin Javascript✔ Spesso, ma non necessario… conoscenza di Photoshop o Illustrator

Sviluppo front-end

Lo sviluppo front-end è “più o meno” programmazione ed è complicato. Richiede un front-ender.

In alcuni casi lo sviluppo HTML è la fase che richiede maggior tempo di sviluppo

Sviluppo front-end

Alternativa… più economica:

Usare un tema HTML (template) acquistato su internet.

Esempio: themeforest (https://themeforest.net/)

Sviluppo front-end

https://themeforest.net/

Vantaggi utilizzo tema✔ Non serve un frontender (costo tema: 15 euro)✔ Non serve un grafico✔ Tempo sviluppo: bassissimo (basta backend)

Svantaggi utilizzo tema✔ Minore flessibilità (non si parte dalla grafica, ci si adatta al tema che si trova)

✔ Altri siti potrebbero aver usato lo stesso tema

Sviluppo front-end

Lo sviluppo back-end serve per la creazione del pannello amministratore:

✔ Accesso riservato con login✔ Aggiunta / modifica contenuto✔ Aggiunta modifica utente✔ Altro...

Sviluppo back-end: PHP + MYSQL

Oltre a questo, chi si occupa della programmazione back-end deve anche “cablare” il front-end in modo che questo diventi “dinamico”.In particolare deve:

✔ Fare in modo che il front-end prenda i contenuti dal database (esempio news, commenti, etc)

✔ Attivare i servizi correlati: invio mail, upload, aree riservate front-end, etc


Competenze necessarie:✔ Un linguaggio “lato server” (PHP, PYTHON, RUBY, C#)

✔ Un linguaggio SQL per Database relazionali (MYSQL, MSSQL, POSTGRESQL, …)

✔ Le basi della gestione di un server (APACHE,IIS)


Spesso chi fa il back-end si basa solitamente su un “CMS” (Content Management System), cioè un software costruito apposta per creare il pannello admin di un sito web.

Può essere di proprietà dello sviluppatore (costruito da lui o dall’azienda per cui lavora)

Può essere opensource: wordpress, joomla, altro

Può essere a pagamento


Svantaggi di un CMS generico (come wordpress):

✔ Meno flessibile (il cliente deve accontentarsi di quello che si può fare, o soprattutto dei modi in cui il software fa le cose)

Vantaggi

✔ Economico


Grazie ad un CMS un frontender può creare il pannello admin di un sito web senza avere particolari conoscenze di programmazione.

Se compra il tema, non servono neppure competenze di HTML, basta installare il CMS e successivamente installare il tema.

Il risultato finale è mediocre, ma il costo sarà bassissimo.


La soluzione CMS scaricato (wordpress) con tema acquistato va bene nei seguenti casi:

✔ Sito web non commerciale (blog personale, etc)✔ Sito web di vetrina personale (professionista, etc)

✔ Sito web commerciale ma a basso budget✔ Altro...


La soluzione più difficile è quella che hanno adottato diverse aziende di successo, e cioè iniziare a programmare e costruire il proprio CMS.

Questo permette di:✔ Avere maggiore flessibilità nella personalizzazione del pannello admin

✔ Vendere un prodotto che non ha nessun altro (non è “il solito wordpress”

✔ Poter fare sito web più customizzati (anche aree riservate, intranet)


Progettazione e sviluppo WEB - Laboratorio Libero · Conoscenza del linguaggio CSS (per il layout:...

Documents

Transcript of Progettazione e sviluppo WEB - Laboratorio Libero · Conoscenza del linguaggio CSS (per il layout:...