progettazione di un sito webteachnet.altervista.org/scuola/guide/progettare/progweb.pdf · asp.net...

39
PROGETTAZIONE DI UN SITO WEB

Upload: others

Post on 25-Aug-2020

1 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

PROGETTAZIONE DI UN SITO WEB

Page 2: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

PROGETTAZIONE DI UN SITO WEB

Fasi di progettazione Software:

● Analisi dei Requisiti

● Progettazione (Design)

● Sviluppo

● Test

● Manutenzione

Analisi dei requisiti

Progettazione (design)

Sviluppo

Test e Manutenzione

Page 3: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Risorse

Attività di tipo gestionale

● Stime dei costi (e dei tempi)

● Gestione dei progetti (delle persone, pianificazione)

● Gestione dei rischi

● Gestione della qualità

Page 4: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Risorse

Documento tipo

Stima dei tempi

Page 5: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Timeline

A cascata

Interattivo

A componenti

Evoluzione

Page 6: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Qualità

Un sito web deve, come tutti i software, garantire i seguenti criteri di qualità:

● Correttezza

● Affidabilità

● Robustezza

● Efficienza

● Usabilità

● Integrità

Li vedremo meglio successivamente....

Page 7: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

PROGETTAZIONE DI UN SITO WEB

Fasi di progettazione Software:

● Analisi dei Requisiti

● Progettazione (Design)

● Sviluppo

● Test

● Manutenzione

Analisi dei requisiti

Progettazione (design)

Sviluppo

Test e Manutenzione

Page 8: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Analisi dei Requisiti

● Cosa vuole il cliente?

(più risulta dettagliata meglio è)

● Terminata l’analisi dei requisiti,

raccolgo tutte le informazioni in documenti (solitamente elettronici, ma anche no)

(si eviterà di perdere dettagli importanti durante lo svolgimento delle fasi successive)

Fase fondamentale!! Raccogliere quante più informazioni possibili

Page 9: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Analisi dei RequisitiDA EVITARE

Analisi dei requisiti

Progettazione (design)

Sviluppo

Test e Manutenzione

Sviluppo Software

DA EVITARE

Partitella

Progetto la mia squadra

Chiamo Amici

Partita

Partita Calcetto

Era calciotto

Page 10: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design)

● Dopo aver risposto alla domanda “cosa deve/devo fare?”

● Ora devo rispondere alla domanda “come posso fare?”

Più a livello informatico, si può trasformare in:

Che tecnologie posso usare?

DATABASE

CMS

PHP

JAVASCRIPT

CSS3

ASP.NET

HTML5

Page 11: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design)

DATABASE

CMS

PHP

JAVASCRIPT

CSS3

ASP.NETHTML5

DATABASE PHP CSS3

SCELTA

Page 12: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Database

DIAGRAMMA E-R

CONTATTO RELAZIONE NUMERO

ID NOME

1 Mario

2 Paolo

3 Luca

4 Marco

ID NUMERO

1 328-123-1234

2 328-123-4567

3 329-321-7654

4 347-987-6589

5 347-555-6544

id_contatti id_numeri

1 3

2 2

1 4

4 1

1 5

CONTATTO NUMERO

(0,n)

DATABASE - Rubrica online

Posso migliorare..... è davvero necessaria la relazione?

(1,1)

CARDINALITA'

Page 13: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Database

ID NOME

1 Mario

2 Paolo

3 Luca

4 Marco

id_contatti ID NUMERO

4 1 328-123-1234

2 2 328-123-4567

1 3 329-321-7654

1 4 347-987-6589

1 5 347-555-6544

CONTATTI NUMERI

Rubrica telefonino

Ho risparmiato una tabella non necessaria

Ora posso eseguire Query di ogni genere sulle tabelle

RISPARMIO DI RISORSE

Page 14: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Interfaccia

Pensata in base alle esigenze del cliente

COMMERCIALE

BLOG

SERVIZI WEB

PORTALE

CLOUD

TARGET

PUBBLICITARIO

Donne Sportivi

Giovani Uomini d'affari

Page 15: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Interfaccia

ibu GastroPub

Page 16: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Interfaccia

Team Antonucci Corse

Page 17: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Interfaccia

Web Application – Comune L'Aquila

Page 18: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione (Design) - Interfaccia

Page 19: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Qualità

Dopo aver visto le prime due fasi del processo di creazione di un sito web rivediamo i criteri di qualità:

● Correttezza, in quale misura rispetta i suoi requisiti

● Affidabilità, quanto bene rispondono ai suoi requisiti

● Robustezza, come si comporta il sistema in caso di errori

● Efficienza, tempi di risposta, uso della memoria

● Usabilità, è user-friendly?

● Integrità, sicurezza in caso di attacchi

Page 20: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Sviluppo

● Si parla dello sviluppo del sito vero e proprio

● Parte quando tutte le precedenti fasi sono state ben definite

DATABASE PAGINE WEB LAYOUT

- Sql- Query - Insert - Select - Delete - Join

- HTML5- Javascript- AJAX- phpecc...

CSSHTML5Javascript

Page 21: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Integrazione e Testing

Se sviluppato in moduli si integra il tutto

Testing

Presenta errori?

Si

oN

Posso consegnare Correggo gli errori

Integrazione

Page 22: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Timeline

A cascata

Interattivo

A componenti

Evoluzione

Page 23: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Timeline

A cascata

Tempi delle varie fasi sono ben equilibrati

Page 24: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Timeline

A cascata

Ciclico, fino a che la valutazione del prodotto diviene soddisfacente rispetto ai requisiti richiesti

In risposta al modello a cascata che risulta troppo lineare

Page 25: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Progettazione di un sito web - Timeline

A componenti

Dopo una valutazione molto attenta e precisa dei requisiti si procede allo sviluppo separato di componenti

L'integrazione è fondamentale

Page 26: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Content Management System

● Cos'è?

Fondamentalmente è un sistema di gestione dei contenuti

Page 27: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Fasi della progettazione

Analisi dei requisiti

Progettazione (design)

Sviluppo

Test e Manutenzione

Come cambia la progettazione

quando usiamo un CMS?

Page 28: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Fasi della progettazione

Analisi dei requisiti

Progettazione (design)

Sviluppo

Test e Manutenzione

La fase di progettazione viene a mancare in maniera consistente

Page 29: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Fasi della progettazione

● Posso ignorare le problematiche legate a:

- Database

- Layout

- Sicurezza

- Scrittura del codice sorgente

(se non per modalità più avanzate)

Da vantaggi significativi nella creazione di siti web con grandi quantità di contenuti

Page 30: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Fasi della progettazione

● I CMS non sono solo per piccoli blog

Page 31: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Struttura

● Come sono strutturati i CMS?

CORE

TEMPLATE MODULI

Espansioni delle funzionalità

Modifica l'interfaccia

Funzionalità base di un CMS

Page 32: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Struttura

CORE TEMPLATE

MODULI

Gestione Articoli/Notizie

Categorizzazione

Sicurezza

Layout

Colori

Miglioramenti di quelle esistenti

Nuove funzionalità

Gestione Utente

Page 33: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

CMS – Qualità

Il CMS garantisce alcuni requisiti di qualità

● Correttezza

● Affidabilità

● Robustezza

● Efficienza

● Usabilità

● IntegritàDipendono dall'utente

Garantiti dal CMS

- Pessima categorizzazione dei dati- Scrittura di dati errati

Page 34: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Sito Web Tradizionale VS CMS

Analisi dei requisiti

Progettazione (design)

Sviluppo

Test e Manutenzione

Analisi dei requisiti

Sviluppo

Test e Manutenzione

Risparmio di tempo

Website CMS

Page 35: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Sito Web Tradizionale VS CMS

Il CMS è quindi uno strumento potente che riduce i tempi di realizzazione di un sito web

ma bisogna pagare un prezzo...

● La Versatilità

- Non tutto può essere fatto da un CMS

- E' generalmente pesante

- Non tutti i requisiti potrebbero essere soddisfatti

- Si adattano poco a servizi e applicazioni web

Page 36: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Sito Web Tradizionale VS CMS

● Un sito web tradizionale (html, php, css) è quindi più versatile ma ha bisogno di più lavoro

in particolare sulla:

- gestione della sicurezza

- gestione utenti

- definizione dei ruoli

- gestione contenuti

Automatizzate nel CMS

Page 37: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Sito Web Tradizionale VS CMS

Differenza Evidente

NOTA BENE

80 28

FATTIBILITA'

Page 38: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

Quale usare?

Dipende dai requisiti

Finita la prima fase di ANALISI DEI REQUISITI posso decidere quale delle due procedure è più conveniente.

Page 39: PROGETTAZIONE DI UN SITO WEBteachnet.altervista.org/Scuola/Guide/Progettare/progweb.pdf · ASP.NET HTML5 Progettazione ... Efficienza, tempi di risposta, uso della memoria ... - gestione

FINE

GRAZIE PER L'ATTENZIONE