drupal security adv

More

Usabilità e accessibilità

davide.pilisi's picture
Submitted by davide.pilisi on Tue, 03/31/2015 - 13:25

A differenza del predecessore, in B3 l'orientamento è verso il mobile first*. Significa che l'aspetto responsivo ( visuale e a livello di prestazioni ) non è un opzione ma la base del framework. In pratica, la griglia offre un esteso margine di personalizzazione a seconda che il device sia extra small, grazie all'utilizzo delle classi specifiche seguite dalla dimensione ( col-xs- ), small ( col-sm- ), medium (col-md), large ( col-lg- ). 

 Extra small devices Phones (<768px)Small devices Tablets (≥768px)Medium devices Desktops (≥992px)Large devices Desktops (≥1200px)
Grid behaviorHorizontal at all timesCollapsed to start, horizontal above breakpoints
Container widthNone (auto)750px970px1170px
Class prefix.col-xs-.col-sm-.col-md-.col-lg-
# of columns12
Column widthAuto~62px~81px~97px
Gutter width30px (15px on each side of a column)
NestableYes
OffsetsYes
Column orderingYes

Checklist Accessibilità

davide.pilisi's picture
Submitted by davide.pilisi on Tue, 03/31/2015 - 13:11
 
1. Che il load-time del sito sia ragionevole.
2. Contrasto adeguato tra testo e sfondo
3. Dimensione carattere / spaziatura di facile lettura
4. Add-on utilizzati con parsimonia, assenza di contenuti Flash o Iframe.
5. Le immagini hanno appropriati tag ALT
6. Il sito ha delle appropriate pagine non-found (404) o accesso negato (403)
Identità
7. Il logo della società  è in evidenza 
8. Il messaggio è chiaro e in evidenza
9.

expo 2015

davide.pilisi's picture
Submitted by davide.pilisi on Sat, 03/21/2015 - 13:01

 

 

Checklist CSS

davide.pilisi's picture
Submitted by davide.pilisi on Mon, 03/02/2015 - 18:28

1- Nella compilazione del CSS, procedere dall'alto verso il basso del layout e dividere con i commenti le sezioni del layout.

I commenti sono una buona idea per rendere leggibile il codice.

/****** Generic classes ***/

 (body, a, p, h1, etc.)

/****** Main content ****/

.main-content

/****** Footer *********/
.footer


2- Accorpare il più possibile le dichiarazioni assieme ( sfruttando le regole comuni e le ereditarietà ) ed evitare i selettori troppo lunghi.

iframe ie11 e blocco dei javascript

davide.pilisi's picture
Submitted by davide.pilisi on Thu, 02/12/2015 - 13:56
errore nei js su iframe in IE Linea: 1 Carattere: 1 Codice: 0 Messaggio di Errore: Errore di sintassi In realtà l'errore dipende dal fatto che non viene caricato il js ma si viene dirottati nella pagina di login per un problema di autenticazione. Il codice, in una pagina a se stante, funziona correttamente: dentro l'iframe il cookie di sessione non viene caricato correttamente .

Mixins

davide.pilisi's picture
Submitted by davide.pilisi on Wed, 10/29/2014 - 14:50

I "mixins" permettono di inserire tutte le proprietà di una classe "padre", semplicemente includendo il nome della classe stessa come uno delle proprietà della classe "figlia". 

.padre{ color: red; font-size: 12px; } 

.figlia{ .padre; }

Border-box

davide.pilisi's picture
Submitted by davide.pilisi on Tue, 10/28/2014 - 09:20

La proprietà box-sizing è utilizzato per dire al browser quali proprietà di dimensionamento includere in larghezza e altezza: se includere il border e padding o solo il contenuto del box. Ad esempio , se si desiderano che due div siano fianco a fianco, si può creare un box-sizing a "border-box" . In questo modo il browser interpreta il box con la larghezza e l'altezza specificate posizionando il margin e il padding all'interno del nostro box.

Coamandi Linux Ubuntu da terminale

davide.pilisi's picture
Submitted by davide.pilisi on Wed, 09/10/2014 - 19:07
Ottenere i privilegi di amministratore: 
sudo su
Installare un qualsiasi pacchetto: 
sudo apt-get install NOMEPACCHETTO
Installare un pacchetto con problemi di dipendenze: 
sudo apt-get -f install
Rimuovere un pacchetto: 
sudo apt-get remove NOMEPACCHETTO
Rimuovere un pacchetto e i vari file di configurazione: 
sudo apt-get –purge remove NOMEPACCHETTO
Aggiornare l’indice dei pacchetti: 
sudo apt-get update
Aggiornare i pacchetti: 
sudo apt-get upgrade
Aggiornare la distribuzione: 
sudo apt-get dist-upgrade

AngularJS

davide.pilisi's picture
Submitted by davide.pilisi on Thu, 09/04/2014 - 19:52

angularjs

Si inizia con due semplici passi:

1. Caricare la libreria ( che più che una libreria è un vero e proprio framework MVC per il frontend )  angularjs.js

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
Caricare lo script dalla CDN di google, ha diversi vantaggi: oltre a non dover scaricare una copia del file per ogni APP che realizziamo, i server di Google sono veloci, e lo script è salvato in cache dai browser: per cui, se lo user interagisce con diverse APP che usano lo script, il suo browser non dovrà scaricarlo più volte.
 
2. Dire ad Angular, tramite la direttiva ng-app, che parte del DOM deve gestire: se si stà realizzando un intera APP in angular, la parte gestita è l'intero tag html, ossia l'intero DOM della pagina
<html  ng-app="myApp">

Snippet pre-loader

davide.pilisi's picture
Submitted by davide.pilisi on Tue, 07/29/2014 - 09:39

Corso On line Free AngularJS

davide.pilisi's picture
Submitted by davide.pilisi on Mon, 07/28/2014 - 13:51

Per iniziare ad esplorare le potenzialità di AngularJs,

una libreria sviluppata sotto il patrocinio di Google, utile ad organizzare il nostro javascript (e sviluppare siti e applicativi davvero responsivi,veloci e "leggibili"),

un corso On line gratuito di code school:

http://campus.codeschool.com/courses/shaping-up-with-angular-js/contents