WEB 1.0
HTML e dintorni
Informa7ca 2014/15 1
World Wide Web La data di nascita del World Wide Web viene comunemente
indicata nel 6 agosto 1991, giorno in cui l'informa7co inglese Tim Berners-Lee pubblic il primo sito web dando cos vita al fenomeno "WWW" (deMo anche "della tripla W").
Informa7ca 2014/15 2
World Wide Web Il conceMo del Web ha integrato mol7 diversi sistemi
informa7vi dispara7, creando uno spazio immaginario astraMo in cui le dierenze tra essi fossero ininuen7.
Il Web doveva includere ogni sorta di informazione su qualunque sistema. Lunica idea comune necessaria a meMere ci assieme fu iden7care un documento tramite lo Universal Resource Iden1er (URI).
DireMamente da ci sono come piovute architeMure (design) di protocollo (come h-p) e di forma7 di da7 (come HTML) che hanno permesso ai computer di scambiarsi informazioni mappando i propri forma7 locali in standard in grado di orire interoperabilit globale.
Informa7ca 2014/15 3
Storia del Web WEB 1.0 (Web dei da7)
Pagine web i cui contenu7 sono crea7 dai tecnici del web Motori di ricerca basa7 su parole chiave
WEB 2.0 (Web dei da7) Si7 i cui da7 vengono crea7 dagli uten7 stessi del web
eBay Wikipedia Blog
Motori di ricerca Web 3.0 (web dei signica7)
Web seman7co?
Informa7ca 2014/15 4
5
Denizioni
WWW -- una infrastruMura soaware costruita sopra Internet
HTTP -- HyperText Transport Protocol, u7lizzato per trasmeMere le pagine web
HTTPS -- HTTP Sicuro (usa la cifratura) HTML -- HyperText Markup Language, linguaggio per descrivere le pagine web
Informa7ca 2014/15
HTML HyperText Markup Language
Sviluppato al CERN dal 1989 Pubblicato nel 1991
Browser: Mosaic Web rende i servizi esisten7 obsole7
WAIS, Hytelnet, Gopher
HTML
Informa7ca 2014/15 6
HTML LHTML un linguaggio di marcatura per la creazione di
ipertes7 (Hyper-Text Markup Language) LHTML non un linguaggio di programmazione. LHTML un
linguaggio di descrizione della struMura e delle pagine di un documento web.
Informa7ca 2014/15 7
Strumen7
Browser Ha il compito di mostrare le pagine HTML Esempi:
Internet Explorer, Firefox, Safari, Opera, Chrome
Editor Crea e modica le pagine HTML. Esempi:
Notepad, TextPad, editor HTML Informa7ca 2014/15 8
Editor HTML Editor HTML Online:
hMp://www.quackit.com/html/online-html-editor/
hMp://htmledit.squarefree.com
Informa7ca 2014/15 9
Funzionamento (1) 1. La visione di una pagina web inizia digitandone l'URL
nell'apposito campo del browser web oppure cliccando su un collegamento ipertestuale presente in una pagina web precedentemente visualizzata o in altra risorsa come ad esempio un'e-mail. Il browser web a quel punto dietro le quinte inizia una serie di messaggi di comunicazione con il web server che ospita quella pagina con lo scopo di visualizzarla sul terminale utente.
2. Per prima cosa la porzione di server-name dell'URL risolta in un indirizzo IP usando il database globale e distribuito conosciuto come Domain Name System (in sigla DNS). Questo indirizzo IP necessario per inviare e ricevere pacchem dal server web.
Informa7ca 2014/15 10
Funzionamento (2) 3. A questo punto il browser richiede le informazioni inviando
una richiesta a quell'indirizzo. In caso di una 7pica pagina web, il testo HTML di una pagina richiesto per primo ed immediatamente interpretato dal browser web che, successivamente, richiede eventuali immagini o le che serviranno per formare la pagina deni7va.
4. Una volta ricevu7 i le richies7 dal web server, il browser formaMa la pagina sullo schermo seguendo le speciche HTML, CSS, o di altri linguaggi web. Ogni immagine e le altre risorse sono incorporate per produrre la pagina web che l'utente vedr.
Informa7ca 2014/15 11
Principi di HTML
Informa7ca 2014/15 12
Elemen7 e tag Gli elemen5 forniscono la struMura di un documento HTML e
dicono come il browser dovr visualizzare il tuo sito web. In generale gli elemen7 sono forma7 da un marcatore (tag) iniziale, del contenuto e un tag nale.
Tag sono le e7cheMe che si usano per marcare l'inizio e la ne di un elemento.
Tum i tag hanno lo stesso formato: iniziano con il segno minore di "".
I tag di apertura: e i tag di chiusura:
Informa7ca 2014/15 13
Testo da formaMare Tag di
Apertura
Tag di Chiusura
Marcatori di formaMazione senza testo.
Un tag pu avere degli aMribu7
Esempio L'elemento b viene usato per i caraMeri in grasseMo. TuMo il
testo tra il tag di apertura e il tag di chiusura viene visualizzato sul browser con caraMeri in grasseMo. ("b" l'abbreviazione della parola inglese "bold".)
This text must be bold.
This text must be bold.
Informa7ca 2014/15 15
Esempio Gli elemen7 h1, h2, h3, h4, h5 e h6 vengono usa7 per i 7toli
(h l'iniziale della parola inglese "heading"), dove h1 il primo livello e normalmente il testo pi grande, h2 il secondo livello e normalmente un testo leggermente pi piccolo, e h6 il sesto e ul7mo livello della gerarchia dei 7toli e normalmente viene rappresentato con un testo piccolo.
This is a headingThis is a subheading
This is a heading!This is a subheading
Informa7ca 2014/15 16
HTML LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando i nostri tes7 allinterno di pagine web
Informa7ca 2014/15 17
HTML LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando i nostri tes7 allinterno di pagine web
Marcatori HTML Informa7ca 2014/15 18
HTML LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando i nostri tes7 allinterno di pagine web
Possiamo formaMare il testo in grasseMo (B = BOLD) o in
corsivo (I = ITALICS)
Informa7ca 2014/15 19
HTML LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando I nostri tes7 allinterno di pagine web
Possiamo suddividerlo in paragra ()
Informa7ca 2014/15 20
HTML LHTML un linguaggio di marcature che ci permeMe di
rendere visibili le nostre informazioni sul web formaMando I nostri tes7 allinterno di pagine web
E allinearlo a destra (aMributo ALIGN) ALIGN = right
Informa7ca 2014/15 21
Approfondimen7 Esistono pochi elemen7 che hanno l'apertura e la chiusura
nello stesso tag. Ques7 elemen7 vengono chiama7 elemen7 vuo7. Non sono collega7 a specici passaggi nel testo, ma piuMosto sono e7cheMe isolate, come per esempio, a linea vuota che si indica con .
A mol7 browser non interessa se scrivi i tag tum maiuscoli, tum minuscoli o mis7. , o normalmente forniscono lo stesso risultato. In ogni caso il modo corre-o quello di scriverli tum con i cara-eri minuscoli.
Un sito web con7ene uno o pi documen7 HTML. La navigazione sul Web consiste nellaprire diversi documen7 HTML.
Informa7ca 2014/15 22
StruMura di un documento HTML
Informa7ca 2014/15 23
24
HTML Page Format
Qis web! Hello World
Informa7ca 2014/15
Il tag opzionale Il tag pu contenere:
Il Tag
The global structure of an HTML Document
Pi Meta Tags
Il tag delimita il corpo del documento. Alcuni AMribu7:
background = uri Denisce lURI di una immagine da usare come sfondo per la pagina. text = color Denisce il colore del testo.
bgcolor= color In alterna7va a background denisce il colore di sfondo della pagina
Il Colore: #RRGGBB
Red = "#FF0000
Blue = "#0000FF"
Black = "#000000
Yellow = "#FFFF00
Il Linguaggio HTML: Body
Informa7ca 2014/15 26
Headings
27
text -- largest of the six text text text text text -- smallest of the six
ALIGN="posi1on" --lea (default), center or right
Informa7ca 2014/15
Headings
Document Headings Samples of the six heading types: Level-1 (H1) Level-2 (H2) Level-3 (H3) Level-4 (H4) Level-5 (H5) Level-6 (H6)
Informa7ca 2014/15 28
Il Tag delimita un paragrafo:
Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interroMe di mon7, tuMo a seni e a gol, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un traMo, a ristringersi, e a prender corso e gura di ume, tra un promontorio a destra, e un'ampia cos7era dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor pi sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi gol e in nuovi seni.
AMribu7 del Tag :
align = lea|center|right|jus7fy
Il Linguaggio HTML: Paragra
Informa7ca 2014/15 29
30
CaraMeri speciali
Character Use
< <
> >
& &
" "
Space
Informa7ca 2014/15
FormaMazione del testo:
monospaced text monospaced text italic text italic text bold text bold text
big text big text small text small text underlined text underlined text
Il Linguaggio HTML: Font Style
Informa7ca 2014/15 31
33
S7li di caraMere: sico
Physical Character Styles Bold Italic Teletype (Monospaced) Underlined Subscripts: f0 + f1 Superscripts: x2 + y2 Smaller Bigger Strike Through Bold Italic Big Monospaced Small Italic Gray Delete Insert
Informa7ca 2014/15
Logical Character Styles Emphasized Strongly Emphasized Code Sample Output Keyboard Text Definition Variable Citation Emphasized Code Gray Citation JDK Acronym
S7li di caraMere: logico
Informa7ca 2014/15 34
Ordered (Numbered) Lists
35
Item one Item two Sublist item one Sublist item two Sub-sublist item one Sub-sublist item two
Informa7ca 2014/15
Liste non ordinate: Type: disc,circle,square Unordered informa7on. Ordered informa7on. Deni7ons.
Unordered informa7on. Ordered informa7on. Deni7ons.
Liste ordinate: Type: 1 (1,2,..), a (a,b,..), A (A,B,..), i (i,ii,..), I (I,II,..) Unordered informa7on. Ordered informa7on. Deni7ons.
I. Unordered informa7on. V. Ordered informa7on. VI. Deni7ons.
Liste di denizione: UL Unordered List. OL Ordered List.
UL Unordered List. OL Ordered List.
Il Linguaggio HTML: Liste
Informa7ca 2014/15 36
Il Link il costruMo di base dellipertesto. Il Link una connessione fra una risorsa Web ed unaltra. ConceMo semplice, ma chiave per laermazione dellHTML Link due estremi dem anchors e una direzione source anchor des7na7on anchors Il des7na7on anchors pu essere una qualsiasi risorsa web (un immagine, un video, un eseguibile, un documento HTML)
La risorsa di des7nazione si omene visitando il link
Il Linguaggio HTML: Links
Informa7ca 2014/15 37
Anchors (HyperLinks)
38
Link a URL assoluta: If you get spam, contact Microsoa to report the problem. Link a URL rela5va: See these
Hyperlinks Welcome to Computer Science at the University of Virginia.
Informa7ca 2014/15 39
40
Il Linguaggio HTML: Immagini
Tag: AMributo SRC (obbligatorio) WIDTH, HEIGHT possono essere in pixel o percentuali dellimmagine WIDTH="357" HEIGHT="50%"
Limmagine viene scalata per rispeMare le dimensioni
Informa7ca 2014/15
Il Linguaggio HTML: Tabelle
41
table tag op7onal table 7tle table row table column header table data element
Informa7ca 2014/15
Il Linguaggio HTML: Tabelle
42
Table Caption Heading1Heading2 Row1 Col1 DataRow1 Col2 Data Row2 Col1 DataRow2 Col2 Data Row3 Col1 DataRow3 Col2 Data
Informa7ca 2014/15
A test table with merged cells Average Redeyes heightweight Males1.90.00340% Females1.70.00243%
Il Linguaggio HTML: Tabelle
Informa7ca 2014/15 43
Il Linguaggio HTML: Tabelle - Esempio
Informa7ca 2014/15 44
CSS
Informa7ca 2014/15 45
LHTML nato in ambien7 scien7ci Linguaggio orientato pi ai contenu7 che alla presentazione
Sono state faMe forzature per aggirare le limitazioni Estensioni proprietarie Conversione del testo in immagini Uso di immagini per il controllo degli spazi bianchi Uso delle tabelle per la formaMazione
Le forzature presentano spesso eem collaterali Scopo degli Style sheets risolvere parte di tali limitazioni CSS = Cascading Style Sheet
Il Linguaggio HTML: Style sheets
Informa7ca 2014/15 46
AMributo id id = name assegna un nome univoco ad un elemento
id u7lizzato per: seleMore per gli style sheet des7na7on anchor reference per gli script client side
AMributo class class = list assegna una classe o un set di classi ad un elemento
Il Linguaggio HTML: id e class
Informa7ca 2014/15 47
CSS Forma generale:
selector {property: value} oppure selector {property1: value1; property2: value2; ... propertyn: valuen }
selector denito come: Nome del tag Nome del tag . class Nome del tag #id
Informa7ca 2014/15 48
CSS
H1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}
Informa7ca 2014/15 49
CMS
Content Management Systems
Informa7ca 2014/15 50
Un Content Management System (CMS)
un sistema utile alla gestione dinamica di contenuti informativi
come ad esempio: (articoli, rubriche, notizie, faq, etc) da pubblicare su siti e portali web
Cos un CMS ?
Informa7ca 2014/15 51
Un Content Management System permette quindi, di gestire l'aggiornamento ed il flusso delle informazioni attraverso soluzioni software che rendono semplici ed affidabili i processi di gestione e di aggiornamento dei contenuti, e cio: linserimento di notizie, news ed immagini Il controllo degli accessi e gestione di aree riservate Disponibilit di mezzi di interazione (chat, forum, ecc.) Report dettagliati
Cos un CMS ?
Informa7ca 2014/15 52
Quali sono le caratteristiche che deve avere un buon CMS? Aggiornamento e gestione del sito via browser web Gestione di ruoli distinti degli utenti Database separato per larchiviazione dei contenuti testuali e grafici Facile integrazione con contenuti provenienti da altri sistemi informatici presenti sul WEB Gestione di mailing list e messaggistica Gestione e classificazione di link, notizie, faq, eventi, immagini Funzionalit avanzate di interrogazione e ricerca interna Personalizzazione dei criteri grafici di presentazione dei contenuti.
Cos un CMS ?
Informa7ca 2014/15 53
Quindi con un CMS, chiunque pur non
conoscendo l'HTML o il PHP, pu arrivare a
gestire la creazione, la modifica e la rimozione di contenuti di un sito web e
di renderlo interattivo, senza aver bisogno delle conoscenze tipiche di un
webmaster!
Cos un CMS ?
Informa7ca 2014/15 54
Vantaggi: Aggiornamento automatico dei contenuti senza intervenire sul codice pagina; Gestione decentralizzata da un normalissimo browser come Explorer; Accessi e ruoli degli utenti altamente configurabile; ogni utente pu cambiare solo
i contenuti che autorizzato a cambiare e non pu intervenire su altri; Ambiente facilitato per autori di contenuti non particolarmente esperti; Il CMS favorisce e facilita la cooperazione nella creazione di contenuti a pi mani;
Pi utenti possono lavorare alla stessa pagina: uno sui testi, un altro sulle foto, ecc)
Contenuti gestibili per tempo e durata (funzione scheduling) Contenuti memorizzati in un database che pu essere interrogato da fonti esterne;
gli stessi contenuti possono essere riutilizzati in altre aree del sito in maniera assolutamente automatica e dinamica;
Il Webmaster pu essere affiancato facilmente da altre figure che lo assistono per la gestione di alcune aree in particolare ecc
Sono possibili ulteriori implementazioni di funzioni in modo semplice da pannello di controllo che le abilita o disabilita (ad es. Chat, forum, mail, ecc)
Cos un CMS ?
Informa7ca 2014/15 55
Svantaggi: Occorre una certa manualit informatica nella gestione del CMS, non quindi
adattissimo a chi inizia a mettere le mani nella costruzione di siti web; ma una volta presa manualit riesce a restituire grandi soddisfazioni
I maggiori CMS lavorano con linguaggi lato-server come il PHP; tali linguaggi non consentono di lavorare visivamente come si fa con lHTML e quindi risultano pi ostici nella modifica della grafica e delle funzioni.
Linstallazione stessa comporta un minimo di complessit dovuta anche alla presenza del database MySql che deve essere richiesto assieme allo spazio web al provider, al momento dellacquisto dellhosting.
Struttura visiva abbastanza rigida che fa uso di templates grafici reperibili anche gratuitamente sul web e che conferiscono aspetti simili a siti anche diversi tra loro; per evitare questo problema il webmaster, che voglia ottenere una nota di originalit, si deve impegnare in una ristrutturazione grafica del layout grafico del sito.
Cos un CMS ?
Informa7ca 2014/15 56
Tirando le somme: Possibilit di distribuire
lamministrazione dei contenuti Sistema di autorizzazione alla
pubblicazione Archiviazione strutturata Scalabilit di funzioni ed add-on Motore di ricerca affidabile Contentuto svincolato dal
contenitore (con il database) Interattivit e dinamicit dei
contenuti
Cos un CMS ?
Informa7ca 2014/15 57
CMS Esempi:
OpenCms open source basato sulla piaMaforma Java e tecnologia XML
Drupal scriMo in linguaggio PHP e distribuito soMo licenza GNU GPL. Joomla! scriMo completamente in linguaggio PHP. pubblicato con
licenza open source GNU GPL v.2. nato nel seMembre 2005 da una scissione dal codice del CMS Mambo
Mambo stato rilasciato lul7ma volta nel 2008, dopodich gli uten7 hanno preferito i suoi fork, principalmente Joomla e MiaCMS
WordPress una piaMaforma soaware di "personal publishing" e CMS, sviluppata in PHP e che usa come database MySQL. Creata da MaM Mullenweg, distribuita con la licenza GNU General Public License.
Informa7ca 2014/15 58
Top Related