Il Web e l’HTML storicamente nascono per rendere accessibile i documenti tramite la rete, ma da soli erano terribilmente tristi e cupi (ve le ricordate le prime pagine web?), dunque nascono e si evolvono le tecnologie CSS e JS dando vita ad una vastissima gamma di soluzioni grafiche, ma che hanno reso il Web un luogo sempre meno accessibile.

Da qui l’idea della coperta corta: raramente un sito web estremamente accessibile è anche estremamente stiloso, o viceversa.

Per questo motivo ho pensato di realizzare una semplice pagina Web statica basata su HTML, CSS e JS; dotata sia di stile che di accessibilità, al fine di sperimentare quella sottile linea di demarcazione tra stile ed accessibilità di un sito Web.

Approfittando quindi del nuovo dominio personale e di un rinnovamento nella grafica ho iniziato a lavorare ad una piccola ed estremamente semplice pagina Web Personale che in qualche modo mi rappresentasse. Una sorta di via di mezzo tra una Mission ed una vCard: ecco qui Happy Hacking di domenicomonaco.it.

Happy Hacking su domenicomonaco.it è una pagina web sufficientemente stilosa, ma allo stesso tempo semplice e contenuta in modo da rendere effettivamente possibile controllare ogni dettaglio relativo allo stile e all’accessibilità: dalla validazione W3C alle dinamiche responsive, dalla compatibilità dei vari browser ai requisiti di accessibilità; nonché l’impegno di una resa grafica sufficientemente stabile.

Sicuramente non potrò coprire tutti gli aspetti, ma provare a perfezionare quanti più possibili dettagli è un ottimo esercizio per studiare come “accessibilità e stile” possano convivere senza soffrire di ipotermia a causa dell’intrinseca coperta corta di cui soffrono le tecnologie web.

Se avete consigli o suggerimenti non esitate farmelo sapere.

Cosa ne pensi? Dimmelo su Twitter @_domenicomonaco oppure su Linkedin linkedin.com/in/domenicomonaco

L'articolo Stile ed Accessibilità nel Web sembra essere il primo su Domenico Monaco.

Supponiamo di avere la necessità di avere un testo di 25px quando il nostro DIV ha una dimensione di 960px in larghezza, in oltre tale testo che si deve rimpicciolire sino ad un minimo di 19px proporzionalmente alla larghezza minima del div di 500px.

Oltre i 960px o meno dei 500px di larghezza del div, il testo deve mantenere rispettivamente il valore massimo (25px da 960px in poi) e minimo (19px da 500px in giù).

Ci basterà chiamare richiamare la funzione JS indicando quindi dimensione minima e massima del div, la dimensione minima e massimo del testo ed l’ID dell’elemento al quale applicare il ridimensionamento.

resizeTextInRange(
  min-div-size,
  max-div-size, 
  min-text-size, 
  max-text.size, 
  div-element-id
);

Seguendo l’esempio precedente la funzione chiamata avrà questo aspetto.

resizeTextInRange(500,960,19,25,'#size-2');

Opzione: Ridimensionare testo di un div_1 rispetto alla larghezza di una div_2 diverso

Oppure si potrebbe avere la necessità di applicare la dimensione del testo ad un elemento (div_1), ma prendere come riferimento di larghezza un’altro elemento o elemento del DOM.

In questo caso ci basterà aggiungere un’ulteriore parametro alla funzione chiamata, ad esempio chiedendo alla funzione di mantenere la dimensione del testo negli stessi range di prima, ma tenendo in considerazione la larghezza del body anziché dell’elemento #size-2

resizeTextInRange(500,960,19,25,'#size-2’,’body");

Qui il codice completo: https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

Qui la pagina di esempio: https://kiuz.github.io/sandbox-html-js-css/text-resize-in-range-of-text-and-screen/src/index.html

Cosa ne pensi? Dimmelo su Twitter @_domenicomonaco oppure su Linkedin linkedin.com/in/domenicomonaco

L'articolo CSS/JS: ridimensionare il testo proporzionalmente alla dimensione del DIV sembra essere il primo su Domenico Monaco.