hTML & CSS

Parte 2

divitis

div ovunque

Un sintomo della divitis è l'utilizzo di div al posto degli elementi appropriati, come h1, p, header, footer, etc...

Div viene usato come un tag multi-purpose.

html

Si dimentica in questo modo cos'è l'HTML, ovvero un linguaggio di markup per descrivere la struttura semantica di un testo.

divitis...

• Diluisce il significato semantico della struttura a favore dello stile, mischiandoli
• Rende il documento più confuso e più difficile da stilare
• Il codice diventa quasi incomprensibile e aumenta la probabilità di errori
• L'uso di tag non semantici priva gli screen-reader, i bot di ricerca, etc..., delle informazioni necessarie
• Il proliferare di tag rende il documento più lungo e inutilmente verboso

<div class='main'>
    <div class='header'>
        <div class='title'>
            <h1>Title</h1>
        </div>
    </div>
    <div class='navigation'>
        <ul>
            <li>...</li>
            <li>...</li>
        </ul>
    </div>
</div>

<header>
    <h1>Title</h1>
</header>
<nav>
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</nav>

quando vogliamo creare un div

• Perché? È veramente necessario?
• Esiste già un tag html che svolge la stessa funzione?
• Stiamo aggiungendo ridondanza nel codice?

tag
semantici

struttura semantica

L'HTML descrive la struttura di un documento, e lo standard moderno ci mette a disposizione una lunghissima lista di tag che descrivono la semantica del nostro documento, come header, footer, nav, etc...

rimuovere div

Dovremmo cercare di costruire documenti affidandoci il più possibile a tag espressive, che ne descrivano la struttura con informazioni utili per motori di ricerca e screen reader.

tag header

Solitamente contiene titolo e sottotitolo, links, etc... È la testa di un documento, o di una sezione, o di un articolo.

tag footer

Elemento collocato alla fine della sezione che va a descrivere. Solitamente può contenere:

• informazioni sull'autore
• copyright
• contatti
• sitemap

tag main

Unico in tutto il documento, contiene il contenuto principale che andiamo a rappresentare. 

Non dovrebbe contenere informazioni come link di navigazioni, etc...

Non dovrebbe essere contenuto in altri tag minori.

tag aside

Elemento il cui contenuto dovrebbe essere inteso come a parte, o a fianco, del contenuto principale. Spesso non viene letto da screen reader.

Spesso usato per contenere una barra laterale di navigazione.

tag nav

Contiene una barra di navigazione. Potrebbe non essere unico nel documento.

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

section
article

tag section

Rappresenta una generica sezione del documento, che racchiude contenuti omogenei per tema e importanza.

Ogni sezione dovrebbe contenere in testa almeno un titolo h1 (e a seguire h2, h3...) che la descriva.

Da non confondere con un div.

tag article

Rappresenta una composizione a se stante nel documento, come un blogpost o un articolo di giornale. L'article dovrebbe avere un header o un h1.

<article class="film_review">
  <header>
    <h2>Jurassic Park</h2>
  </header>
  <section class="main_review">
    <p>Dinos were great!</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>Way too scary for me.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-16 19:00">May 16</time>
          by Lisa.
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>I agree, dinos are my favorite.</p>
      <footer>
        <p>
          Posted on
          <time datetime="2015-05-17 19:00">May 17</time>
          by Tom.
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      Posted on
      <time datetime="2015-05-15 19:00">May 15</time>
      by Staff.
    </p>
  </footer>
</article>

outline

L'outline del documento è una rappresentazione schematica del documento, che ne evidenza le parti importanti.

Nell'outline finiscono tutti gli header, i titoli, gli header delle section e degli article.

L'outline descrive la consistenza semantica della nostra struttura, l'accessibilità dei contenuti, la linearità e la chiarezza del documento.

https://gsnedders.html5.org/outliner/

<section>
  <h1>Forest elephants</h1>    
  <p>In this section, we discuss the lesser known forest elephants. 
    ...this section continues...
  <section>
    <h2>Habitat</h2>  
    <p>Forest elephants do not live in trees but among them.
        ...this subsection continues...
  </section>
</section>
<section>
  <h3>Mongolian gerbils</h3>
  <p>In this section, we discuss the famous mongolian gerbils. 
     ...this section continues...
</section>

1. Forest elephants
   1.1 Habitat
2. Mongolian gerbils

Esercizi

• Creiamo e stiliamo una prima pagina di un sito di un giornale: abbiamo una navigazione per argomenti (politica estera, interna, cronaca nera...), e una serie di articoli che avranno titolo, data, autore e un contenuto.
• Pagina blog-personale: una sezione di presentazione, con un piccolo curriculum, a seguire i vostri blogpost. A lato una barra di navigazione.
• Sito di raccolta snippet di codice. Abbiamo una navigazione, diverse sezioni con diversi linguaggi, e i vari snippet sono descritti e hanno un nome.

• Sito ecommerce: abbiamo una parte della pagina di testo principalmente, dove vengono rappresentate sotto forma di testo le ultime offerte, con una data, una percentuale, una breve descrizione.
  Sotto questa sezione ci sono i prodotti in vendita, una riga ha due colonne, con un'immagine e una descrizione, un titolo, un costo.

full
stack

DIario delle lezioni

• Una pagina di presentazione del corso con un indice delle lezioni, per data, e un elenco di alunni partecipanti.
• La pagina dell'alunno, con qualche informazione sull'alunno, nome cognome, email, piccolo CV
• Pagina della lezione, con data orari, elenco di argomenti trattati.
• Menu' in alto: tasto per tornare alla pagina principale
• Menu' in alto: tasto "contacts" che va alla pagina contatti, con responsabile del corso, numeri di telefono, email.

BLOGPOST

1. Backend in Flask.
   Creazione di un blogpost, descritti da titolo, contenuto e data.
   POST {"title": ...., "content": ...., "data": ...... }
2. Endpoint "/" per servire la pagina del nostro blog.
   GET "/"
3. Client python per creare post con requests.
   Tool da riga di comando con argparse, che prende un titolo, un content e una data per andare a chiamare la post del server e creare un blogpost.
4. I blogpost vengono salvati in un database sqlite3.
5. Frontend html5+css per la pagina del nostro blog. Uso di flexbox per il layout.

Snippet bank

1. Backend in Flask.
   Creazione di snippet, descritti da titolo, linguaggio e pezzo di codice.
2. Pagina iniziale, con tutti i linguaggi disponibili, a griglia.
3. Pagina degli snippet di un linguaggio.
4. Client python per creare snippet con requests.
5. Frontend html5+css per la pagina del nostro blog. Uso di flexbox per il layout.