In questo articolo vediamo alcune tecniche per rendere le nostre pagine web “responsive”, ovvero capaci di adattarsi allo schermo/dispositivo su cui vengono visualizzate per consentire una fruizione più comoda, mantenendo inalterata l’esperienza utente, che si usi ad esempio un pc con schermo grande, un tablet con uno schermo medio o uno smartphone con schermo piccolo. Vediamo come.
css
Cheatsheet CSS, le proprietà più usate
Non è facile fare un riassunto delle centinaia di proprietà CSS 3 usate nei fogli di stile. Certo è che ce ne sono alcune decisamente più usate e che è quasi irrinunciabile non conoscerle. Lo studente spaesato, con esercizi ripetuti, potrà certamente memorizzarle in modo semplice. Vediamo un prontuario, un cheat sheet suggerito per le … Leggi tutto
Esercizio 00 – pagina HTML/CSS
Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressa con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator
Esercizio 01 – pagina HTML/CSS
Andiamo a vedere un esercizio con HTML e CSS per realizzare una vera pagina con un layout strutturato. Oltre al codice commentato, è presente un file zip con la struttura delle cartelle e il codice completo. Come ogni esercizio la struttura delle nostre cartelle è: Una cartella radice, le tre cartelle img, css, js, il … Leggi tutto
Esercizio 02 – pagina HTML/CSS
Per ogni esempio sono forniti uno schema stilizzato della richiesta, una cartella compressa con la struttura esemplificativa ma realistica del nostro sito con la/le pagine web nel livello più basso, una cartella css per i fogli di stile, una js per gli script javascript ed una img per contenere le immagini. I link all’interno del codice delle pagine devono tener conto di tali percorsi. Quindi il codice è estratto e pubblicato. Le soluzioni proposte non necessariamente sono le uniche valide, possono esistere diversi modi di realizzare una specifica con selettori e fogli di stile differenti. Le soluzioni proposte sono testate su W3C Validator
Esercizio 03 – pagina HTML/CSS
Un esempio cumulativo di tutte le caratteristiche HTML5/CSS3 viste nei precedenti esempi. Un esempio anche visivamente un po’ più carino e realistico di sito web, rispetto ai precedenti ma senza troppe aspettative! Cerchiamo di analizzare le sue singole parti. Come sempre, trovate il codice cumulativo in allegato.
Esempi con Form in HTML (semplici)
Qui di seguito vogliamo raccogliere qualche esempio di form per pagine HTML. L’intento è quello di permettere un raffronto tra la resa grafica e il codice HTML che il lettore potrà provare a replicare. Gli esempi di questo post sono volutamente semplici, lasciati senza CSS o particolari attributi in modo da focalizzare l’attenzione sui tag fondamentali. Potete inserirli in un qualsiasi body di una vostra pagina web per un test completo.
Form HTML/CSS (intermedio) – Esempio 01
Una lista di esercizi con form HTML5 e CSS3. Gli esercizi contengono CSS esterni e l’uso dei tag DIV per una formattazione più complessa ma una resa grafica più piacevole ed in linea con la realtà che troviamo sul web. Qui una forma di login con input senza bordi e un bordo blu quando si fa focus/clicca dentro la casella stessa.
Uso del Flexbox
Uno dei problemi più ostici per uno sviluppatore web alle prime armi è realizzare un front-end, una interfaccia, con oggetti, foto, contenitori allineati. Esistono diverse tecniche per ottenere il risultato voluto, ma nessuna è semplice ed efficace come il flexbox. Vediamo come usarlo.
Le tabelle con DIV e CSS3
Negli ultimi anni si è sempre più imposto nel mondo web, la realizzazione di pagine web senza tabelle o i pessimi frame per determinare la disposizione degli oggetti. Abbiamo già parlato anche dei tag semantici che vanno decisamente verso questa direzione.