Introduzione al Web - Computer Graphic

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


Informatico britannico



Papà del World Wide Web nato nel 1990



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


Titoli


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

http://www.w3schools.com/

http://www.w3schools.com/

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


Paragrafi, sezioni, sidebar

Header

Body

Footer


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 Firefox


Io sono Firefox

Io sono Safari


Io sono Firefox

Io sono Safari

Io sono Opera


Io sono Firefox

Io sono Safari

Io sono Opera

Io sono Internet Explorer


Io sono Firefox

Io sono Safari

Io sono Opera

Io sono Internet Explorer

Come un browser mi fa visualizzare per esempio, Facebook?

digito facebook.com

http://facebook.com

digito facebook.comIl DNS trasforma l’URL in un IP

http://facebook.com


DNS = Domain Name System

IP = Indirizzo IP

http://facebook.com


Trova il server dove è collocato il sito web

http://facebook.com



Tutti i percorsi dove sono collocati i file tornano indietro

http://facebook.com



Il browser le legge, le codifica e le mostra sul nostro computer

Tutti i percorsi dove sono collocati i file tornano indietro

http://facebook.com

È 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