View
159
Download
0
Category
Preview:
Citation preview
DATA ESAME SESSIONE GIUGNO
Comunicazione di servizio
Lunedì 22 Giugno dalle ore 9.30
Comunicazione di servizio
INTRODUZIONE AL WEBMassimo Devicienti
Abbiamo costruito il nostro brand
Lo stiamo comunicando attraverso i social network
Ora costruiamoci la nostra pagina web
Chi è il creatore del web?
Sir Timothy John Berners-Lee
Sir Timothy John Berners-Lee
Informatico britannico
Sir Timothy John Berners-Lee
Informatico britannico
Papà del World Wide Web nato nel 1990
Sir Timothy John Berners-Lee
Informatico britannico
Papà del World Wide Web nato nel 1990
Inventore del codice HTML, del primo server e del primo browser
Ok con calma, cos’è l’HTML?
è il linguaggio di markup solitamente usato per la formattazione e impaginazione di documenti ipertestuali
disponibili nel World Wide Web sotto forma di pagine web.
Quindi è la parte testuale o di sintassi che visualizziamo sul
nostro browser
Tag HTML
Tag HTML
Il tag indica una struttura in un documento HTML e un metodo
per ordinare gerarchicamente i contenuti
Tag HTML
O più semplicemente dice al browser cos’è l’elemento che si trova al suo interno
Tag HTML
<nome del tag> Contenuto </nome del tag>
HT
ML
HT
ML
HT
ML
HT
ML
HT
ML
Guardiamo ora un sito solo in HTML
Titoli
Titoli
I titoli servono a rappresentare testualmente nel HTML il contenuto principale
della pagina web
Titoli
I titoli però sono diversi e non possono essere solo uno per pagina web
Titoli
<h1>Titolo della pagina</h1>
Titoli
<h2>Titolo della pagina</h2>
Titoli
<h3>Titolo della pagina</h3>
Titoli
fino ad <h5>
Titoli
Domanda: ci possono essere più h1 o h2 in una stessa pagina web?
Titoli
Sì ma è meglio non farlo! Ergo teniamo 1 solo h1 e 1 solo h2.
Mentre per gli altri <h..> non c’è problema.
<h1>
<h2>
<h3>
<h1>
<h2>
<h3>
Paragrafo
Paragrafo
Il paragrafo è una parte di testo dove vengono raccolte le informazioni
di tipo testuale sviluppate su periodi e frasi.
Paragrafo
Il suo tag è: <p> Lorem ipsum etc. </p>
<h1>
<h2>
<h3>
<p>
<h1>
<h2>
<h3>
<p>
Link
Link
I link sono collegamenti ipertestuali che portano l’utente ad un file,
ad una pagina web del sito internet etc
Link
Il loro tag è leggermente più difficile
Link
<a href=“www.nomedellink”> !
link visualizzato sul HTML !
</a>
<h1>
<h2>
<h3>
<p>
<a href=“”></a>
<h1>
<h2>
<h3>
<p>
<a href=“”></a>
LISTE
Liste
Le liste servono per organizzare a livello gerarchico (numeri o elementi grafici)
un elenco di elementi testuali
Liste
<ul> !
!
!
</ul>
Liste
<ul> !
<li>Elemento della lista</li> <li>Elemento della lista</li> <li>Elemento della lista</li> <li>Elemento della lista</li>
!
</ul>
Liste
<ul> !
<li> <a href=“#”>Nome del link</a> </li> !
</ul>
Liste
<ul> !
<li> <h4>Titolo</h4> </li> !
</ul>
Questo per dirvi che i tag HTML lavorano con effetti centripeti
Quindi prima il tag madre <ul>
Quindi prima il tag figlio <li>
Quindi prima il tag elemento <h4>
Prima di passare ad altro alcuni consigli utili sul HTML
CHIUDETE SEMPRE I TAG!
<h1> Nome del sito <p> Lorem Ipsum etc </p>
<h1> Nome del sito <p> Lorem Ipsum etc </p>
<h1> Nome del sito </h1> <p> Lorem Ipsum etc </p>
NON SIETE DEVELOPER! NON EDITATE DOVE NON SAPETE!
GUARDATE IL CODICE CON RISPETTO
COME PER LE TASSE, ESISTE UN’EQUITALIA PER L’HTML
Ci sarebbero altri tag HTML che non affronteremo
Però ne mancano alcuni fondamentali
Header
Body
Footer
Header
Body
Footer
Logo del sito, nome del sito, menù
Header
Body
Footer
Logo del sito, nome del sito, menù
Paragrafi, sezioni, sidebar
Header
Body
Footer
Logo del sito, nome del sito, menù
Paragrafi, sezioni, sidebar
Informazioni legali, generali, contatti
<html>
</html>
<html>
</html>
<head>
</head>
<html>
</html>
<head>
</head>
<title> </title>Nome della pagina web
<body>
</body>
Contenuto della pagina
<html>
</html>
<head>
</head>
<title> </title>Nome della pagina web
<body>
</body>
Contenuto della pagina - nel corpo del sito va a finire il <footer> </footer>
Ok, abbiamo introdotto l’HTML
Ma qual’è il codice che da colori ai testi, il posizionamento delle immagini
e tutte le caratteristiche estetiche?
è un linguaggio usato per definire la formattazione di documenti HTML
è un linguaggio usato per definire la formattazione di documenti HTML. !
nasce nel 1996
Ma non addentriamoci troppo. Ci penserà Webflow ad aiutarci
Domanda da un milione di dollari
Come visualizzo una pagina web?
Con un browser
è un programma che consente di usufruire dei servizi di connettività
in Internet,o di una rete di computer e di navigare sul World Wide Web.
Io sono Google Chrome
Io sono Google Chrome
Io sono Firefox
Io sono Google Chrome
Io sono Firefox
Io sono Safari
Io sono Google Chrome
Io sono Firefox
Io sono Safari
Io sono Opera
Io sono Google Chrome
Io sono Firefox
Io sono Safari
Io sono Opera
Io sono Internet Explorer
Io sono Google Chrome
Io sono Firefox
Io sono Safari
Io sono Opera
Io sono Internet Explorer
Come un browser mi fa visualizzare per esempio, Facebook?
digito facebook.comIl DNS trasforma l’URL in un IP
DNS = Domain Name System
IP = Indirizzo IP
digito facebook.comIl DNS trasforma l’URL in un IP
Trova il server dove è collocato il sito web
digito facebook.comIl DNS trasforma l’URL in un IP
Trova il server dove è collocato il sito web
Tutti i percorsi dove sono collocati i file tornano indietro
digito facebook.comIl DNS trasforma l’URL in un IP
Trova il server dove è collocato il sito web
Il browser le legge, le codifica e le mostra sul nostro computer
Tutti i percorsi dove sono collocati i file tornano indietro
È un processo complesso ma velocissimo
Ma è sempre così?
Vi è mai capitato che un sito si caricasse sul vostro browser
lentamente?
Potrebbe essere la linea internet con dei guasti
Potrebbe essere il vostro browser non aggiornato
OPPURE UN SITO WEB TROPPO PESANTE
Le immagini che caricate (jpg o png) devono essere leggere
I video devono essere leggeri oppure caricati su server esterni al tuo
(Youtube)
I file audio meglio se li carichi su Soundcloud oppure
che siano degli mp3 leggeri
RENDERAI IL WEB UN POSTO MIGLIORE E MENO ANNI 90
Solo per rendere il web un posto
migliore?
No! Usufruibile da tutti! Velocemente!
La connettività non passa più soltanto dai personal computer
Facciamoci un caffè!
Seguimi su Twitter @msdvc
Recommended