Ecco come calcolare il prezzo della vostra prestazione!

Prima di tutto dobbiamo avere chiaro in mente che il compenso netto rappresenta l’80% della cifra lorda da chiedere.
Chiarito questo punto, ecco un file in Excel (scaricabile e utilizzabile liberamente!) che ci permette di calcolare velocemente il compenso netto partendo dal compenso lordo e viceversa.

Suggeriscimi un argomento!

Vogliamo ottenere tutto questo con l’utilizzo dei soli CSS: in particolare degli pseudo-elementi :before e :after. L’effetto finale risulta molto ben fatto e sicuramente subito utilizzabile per tutti i browser (mediante l’utilizzo dei tag proprietari dei vari browser), escluse però tutte le versioni di Internet Explorer!

CSS3: Galleria di immagini con ombre e effetto foto piegata!

Dobbiamo realizzare una galleria di immagini per un portfolio online? Ecco di seguito una pagina di esempio e il codice che ci serve:

Per cominciare, organizziamo le illustrazioni in una semplice lista non ordinata di elementi:

<ul class="box">
<li><img src="monster-03.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-04.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-02.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-01.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-05.png" width="250" height="150" alt="Monster" /></li>
<li><img src="monster-06.png" width="250" height="150" alt="Monster" /></li>
</ul>

Applichiamo gli stili CSS (nell’ordine che vedete sotto) in modo tale che le immagini si dispongano una a fianco all’altra, e che abbiano un effetto di ombra interna ed esterna, ottenuta rispettivamente con le propietà CSS3 rgba() e rgba() inset:

ul.box li {
	list-style-type: none;	margin: 0 30px 30px 0;
	padding: 0;	width: 250px;	height: 150px;
	border: 1px solid #efefef;	position: relative;
	float: left;
	background: #ffffff; /* per i vecchi browser */
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
	-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.1) inset;
	-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }

Fatto questo, trasformiamo gli oggetti con i CSS3: ecco come applicare gli stili per ottenere l’ombra esterna "piegata"!
Inseriamo due elementi posizionati absolute dietro ogni elemento della lista (con il corretto z-index), con gli pseudo-elementi :after e :before. Essi vengono poi ruotati con la proprietà transform:rotate, e deformati con la proprietà skew, che applica una inclinazione lungo gli assi X e Y.
Ecco cosa inserire:

ul.box li:after {
	z-index: -1;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	right: 10px;
	bottom: 10px;
	transform: skew(15deg) rotate(6deg);
	-webkit-transform: skew(15deg) rotate(6deg);
	-moz-transform: skew(15deg) rotate(6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);  }
ul.box li:before {
	z-index: -2;
	position: absolute;
	background: transparent;
	width: 70%;
	height: 55%;
	content: '';
	left: 10px;
	bottom: 10px;
	transform: skew(-15deg) rotate(-6deg);
	-webkit-transform: skew(-15deg) rotate(-6deg);
	-moz-transform: skew(-15deg) rotate(-6deg);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); }

Articoli correlati:

1. CSS3: compatibilità cross-browser…da oggi!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Si sa, la fine dell’anno è occasione per un piccolo bilancio di ciò che è stato, e per azzardare dei pronostici su ciò che ci potremmo aspettare.

Dunque, che cosa è cambiato, in questi dieci anni? La tecnologia è diventata molto più piccola e migliore. La popolazione mondiale è cresciuta, e per la prima volta più persone vivono in città piuttosto che nelle aree rurali. Il consumo di elettricità in Cina è quadruplicato. E i costi della tecnologia sono sempre più evidenti rispetto a prima. Ma in realtà, i dati parlano da soli. Eccoli:

Suggeriscimi un argomento!

Progettato in HTML5, questa guida parla di tutto: a partire dal significato di “Internet”, fino a tutto il mondo dell’open source e dei browser moderni.

Articoli correlati:

1. Cheat Sheets per il Web Design
2. Cosa è HTML5? Ecco una infografica che lo spiega!
3. CSS3: compatibilità cross-browser…da oggi!

Tra tutte le "best practices" per velocizzare il carimento di un sito, rivolgiamo per prima cosa la nostra attenzione a i file CSS e JavaScript, e ai metodi per comprimere il codice. Molto spesso infatti, per i grandi progetti, i fogli di stile raggiungono un numero elevato di righe, e aumentano con il numero delle sezioni della pagina, sotto forma di file esterni richiamati con la regola @import. La stessa cosa avviene con i file JavaScript. Tralasciamo il discorso sul codice HTML, perché una sua compressione non apporterebbe significativi benefici.
Vediamo come ottimizzare il loro peso grazie a due ottimi strumenti online.

JavaScript: minimizzare e comprimere!

Minifyjs è un ottimo compressore di codice JavaScript, la cui funzione è quella di prendere il codice sorgente originale, eliminare tutti i caratteri non necessari (sopratutto glie spazi bianchi), e mantenere intatte le funzionalità dello script. 

Riduciamo il peso dei CSS!

Questo ottimo tool online, nella sua cassetta degli attrezzi può vantare ottimi strumenti per eliminare parti superflue o ridondanti, rendendo quindi il caricamento di una pagina più veloce.

Opzioni di compressione

Colori

• Converte i colori in esadecimale
• Converte le proprietà esadecimali da lunghe in forma breve
• Converte da esadecimale in forma lunga in nomi di colore
• Converte da RGB in esadecimale

Misure

• Rimuove le misure pari a zero

Regole

• Combina regole identiche
• Combina selettori identici
• Combina le proprietà
• Rimuove le proprietà sovrascritte

Proprietà

• Rimuove i valori inutili da margin e padding
• Convertire in numeri le proprietà text-weight

Opzioni di output

• Mostra le statistiche
• Produce un output a colori
• Produce un file di output della dimensione più piccola

Articoli correlati:

1. AI to Canvas: utilizzare subito HTML5 Canvas!
2. CSS Pseudo-classi: come usarle su IE6+!

AI⇒Canvas è un plug-in che offre infatti le opzioni per il disegno, l’animazione e la codifica, come "eventi" JavaScript in modo da poter costruire applicazioni web interattive ben progettate basate sul tag canvas.
Lo scopo di Ai⇒Canvas è di accelerare lo sviluppo del tag HTML5 canvas: esso infatti, partendo da un file vettoriale, genera ed esporta codice HTML e JavaScript che può essere subito copiato nella propria applicazione ed eventualmente ampliato in un secondo momento.

Cominciamo a usare HTML5 Canvas

Per installare Ai⇒Canvas, scaricare la versione adatta al prorio sistema operativo (per Windows o OS X), ed estrarre il file Ai2Canvas.aip nella cartella plug-in di Adobe Illustrator. Assicurarsi di riavviare Illustrator se è già in esecuzione. Una volta fatto questo, possiamo scaricare un file illustrator di esempio, e salvare ciascun elemento vettoriale in un livello separato.

Canvas in inglese vuol dire tela, per incomincare fin da subito a "dipingere" e per testare fin da subito le potenzialità del plugin, è sufficiente cambiare il nome di ciascun livello del file .AI come se fosse una funzione JavaScript, per esempio: "nomeElemento();". Possiamo vedere fin da subito il risultato scegliendo File / Esporta, selezionare " <canvas> " come tipo di file, quindi fare clic su Salva per visualizzare il risultato nel browser.

Animazioni e Canvas: ecco un semplice esempio

Ogni livello di disegno all’interno del file .AI può essere ruotato, ridimensionato, e sbiadito, configurando le impostazioni di animazione. Le impostazioni di animazione controllano come le proprietà cambiano nel tempo, e ogni impostazione è dotata di otto possibili settaggi (si veda la documentazione estesa per ulteriori dettagli). Le impostazioni includono la direzione dell’animazione, la sua durata complessiva, invertire o no la direzione, una funzione di interpolazione, e un ritardo iniziale prima che l’animazione abbia inizio.

Quando l’animazione riguarda una forma, è spesso utile riposizionare il punto di origine (il luogo in cui gli assi X e Y si intersecano a 0, 0). Ai⇒Canvas rende facile spostare l’origine di ogni livello in modo che le animazioni siano esportate correttamente.

Per esempio, rinominiamo il livello nomeElemento(); in nomeElemento(origine: -1.5, 0.5);. I due valori indicano uno spostamento rispettivamente sull’asse orizzontale e su quella verticale: in particolare essi posizionano il punto di origine a una volta e mezzo l’intera larghezza dell’oggetto vettoriale verso sinistra (al di fuori dei confini dell’oggetto, verso sinistra), in verticale a metà della sua altezza.
Per aggiungere una seconda proprietà, inserire un punto e virgola prima della nuova proprietà e il suo valore. Cambiare il nome del livello in nomeElemento(origin: -1.5, 0.5; rotate-direction:cw);, questa prprietà imposta una rotazione all’animazione, che imprime all’oggetto un movimento in senso orario ("CW significa ClockWise, senso orario; per imposare in senso antiorario scrivere AW, AnticlockWise ").

Come utilizzare il tag Canvas su Internet Explorer 6+?

Ecco come essere sicuri che il tag canvas, ad oggi non supportato da IE precedenti alla versione 9, sia interpretato da tutte le versioni, dalla 6 alla 8.
Ecco come procedere: per prima cosa, scarichiamo la versione compatta di explorercanvas e colleghiamola al file contenente il canvas, inserendo la chiamata alla libreria all’interno dei commenti condizionali per InternetExplorer, così:

<!--[if IE]><script type="text/javascript" src="cartellaScript/excanvas.compiled.js"></script><![endif]--> 

Purtroppo però, ExCanvas non permette a IE di vedere le animazioni costruite con canvas.

Articoli correlati:

1. HTML5: tag nuovi e anteprima delle novità
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. HTML5: tavola degli elementi interattiva!

I file e le directory in Unix possono avere tre tipi di permessi: lettura (‘ r ‘), scrittura (‘ w ‘), ed esecuzione (‘ x ‘).
Ogni autorizzazione può essere su "on" o "off’" per ciascuna delle tre categorie di utenti: il proprietario del file o delle cartelle; altre persone nello stesso gruppo del proprietario, e infine tutti gli altri.

In linea generale:
Se un file o una cartella è scrivibile, l’installazione di WordPress è considerata insicura.
Se cambi i permessi di qualsiasi file o cartella, l’installazione è insicura.

Per aumentare la sicurezza ecco come procedere:
NON utilizzare l’editor nativo di WordPress.
NON utilizzare plugin che hanno bisogno di scrivere qualcosa al server.
NON utilizzare il plugin integrato per il backup, che permette di salvare file di backup sul server.
NON deve utilizzare la funzione di cache in versione 2.x

Le cartelle devono avere le autorizzazioni settate a 755. MAI 777!
Tutti i file devono avere i permessi a 644.
Se si desidera utilizzare l’editor integrato, i file di tema devono avere come autorizzazioni 666. MAI 777!

Mettere in sicurezza la cartella wp-content/uploads/

Se vogliamo caricare i file delle immagini direttamente dall’editor di WordPress, da backend, caricando un file .htacces direttamente nella cartella che vogliamo proteggere, possiamo evitare che eventuali file php caricati su wp-content/uploads/ possano essere eseguiti:

order deny,allow
deny from all

Questo tecnica può essere applicata a tutte le estensioni di file da bloccare nella cartella.

Articoli correlati:

1. WAMP e SSI: come aggiungere il supporto Server Side Include

La tipografia è senza dubbio uno degli elementi più importanti di tutto il design, online o offline. E mentre impostare un carattere su una pagina non è complicato di per sé, se si seguono alcuni principi aumenterà notevolmente la leggibilità e l’estetica di un layout. Imparare queste linee guida può fare la differenza tra una tipografia di livello adeguato e una realmente grande.

Ma, da dove cominciare? Ecco un po’ di consigli:

CSS Font Shorthand: tutto in breve…ma in ordine!

I CSS permettono di scrivere una dichiarazione dei valori di tutte le proprietà di un selettore raggruppandoli in una regola unica, detta shorthand.
Vediamo un esempio per i font:

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:34px;
line-height:100px;
font-family:"Times New Roman", Times, serif;

…che equivale a scrivere:

font: italic small-caps bold 34px/100px "Times New Roman", Times, serif;

Come possiamo notare, invece di specificare ogni proprietà separatamente, si può fare tutto in una volta, utilizzando la proprietà shorthand (in questo caso per i font, ma l’esempio vale per tutte le proprietà).
Gli shorthand permettono ai webdesigner di risparmiare un bel po’ di linee di codice: nel primo esempio infatti abbiamo utilizzato 146 caratteri, nell’esempio con lo shorthand solo 73. Non male, vero?
Per i font l’ordine delle proprietà è il seguente:

Utilizzare qualsiasi font? font-face!

Ultimamente gli esempi di siti web che utilizzano magnificamente la regola font-face sono numerosi.
La proprietà font-face infatti è abbastanza semplice da comprendere e utilizzare, e con una ottima compatibilità cross-browser.

Ecco per sommi capi come funziona: carichiamo il carattere che vogliamo utilizzare per il nostro sito web (prima bisogna assicurarsi di averei permessi di licenza), diamo un nome e impostiamo la posizione del file. Per ottenere tutto questo, utilizziamo il generatore @font-face di FontSquirrel.
Il CSS che otterremo sarà simile a questo:

@font-face {
  font-family: 'nome-font-family';
  src: url('nome-font.eot');
  src: local('☺'),
  url('nome-font.woff') format('woff'),
  url('nome-font.ttf') format('truetype'),
  url('nome-font.svg#webfontJCxlpV6V') format('svg');
  font-weight: normal;
  font-style: normal;
}

Abbiamo in questo modo attivato una nuova famiglia di font, che può essere richiamata per qualsiasi selettore in modo usuale, così:

h1 { font-family: 'nome-font-family', helvetica, arial; }

Controllare le ‘orfane’ al termine di paragrafo

In termini tipografici, le orfane sono parole o frasi si trovano alla fine di una colonna o pagina.
Nei siti web, questa situazione accade molto spesso quando un testo dentro a un paragrafo viene affiancato a una immagine flottante a sinistra. Ecco cosa succede:

Possiamo correggere questo errore applicando al paragrafo di testo la proprietà overflow:hidden;.
Se il nostro layout, o markup, prevede una succesione di paragrafi, In alternativa, possiamo wrappare il paragrafo, o i vari paragrafi dentro un div e appliacare ad esso l’overflow.
Ecco come:

.thumb {
  float: left;
  margin: 5px 20px 20px 0;
  padding: 5px;
  border: 1px solid #ccc;
  background: #f0f0f0;
}
.overfloated, .description {overflow: hidden; }
*html .description {float: left; /* IE6 Fix */}

CSS e puntini di sospensione…

La proprietà text-overflow permette di controllare ciò che viene mostrato quando il testo è in eccedenza rispetto al suo contenitore.
Questa proprietà è utilissima se si desidera che tutti gli elementi di un elenco di notizie abbiano la stessa altezza, indipendentemente dalla quantità di testo: possiamo utilizzare i CSS per aggiungere puntini di sospensione (…) per indicare più testo.
Questa proprietà funziona nelle ultime versioni di Safari e Opera e in IE6 (dove l’elemento che sborda deve avere una larghezza impostata, ad esempio 100%) e IE7.
Per essere in grado di applicare la proprietà ad un elemento, esso deve avere white-space: nowrap e overflow settato su qualcosa di diverso da visible.
Per farlo funzionare anche in Opera, è necessario aggiungere la proprietà specifiche del fornitore; purtroppo, non è supportato da Firefox! Aggiornamento: adesso è possibile avere l’ellissi del testo anche su Firefox con i soli CSS!)
Ecco come impostare i CSS:

ul {
  width:200px;
}
li {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

• Safari
• Chrome
• Opera
• IE6+

Web e sillabazione: si può!

Dato che, come abbiamo visto, le pagine web hanno principalmente contenuti testuali, la sfida con il rendering del testo è che il testo incolonnato o il resize della pagina può produrre effetti imprevedibili nella visualizzazione dei contenuti.

Semplicemente, hyphenator.js è uno script JavaScript che divide automaticamente il testo a interruzioni di linea (sillabe). Questo consentirà di evitare che le parole si rompano su un ritorno a capo, o di essere completamente spostate verso il basso alla riga successiva.

Ecco un esempio di pagina con sillabazione: per verificare l’effetto dello script, provate a ridimensionare la pagina, o a attivare/disattivare lo script con il tool in alto a destra.

Articoli correlati:

1. CSS3: compatibilità cross-browser…da oggi!

Creiamo le ancore

Una tipologia di siti web che sta recentemente prendendo piede è il "Vertical Portfolio", cioè un sito web di una sola pagina che si sviluppa in verticale.
Sostanzialmente, per creare questo effetto, si fa uso degli ancoraggi interni alla pagina web: utilizzando l’attributo name specifichiamo il nome dell’ancoraggio e impostiamo così il segnalibro all’interno del documento HTML.
Questi segnalibri non vengono visualizzati in alcun modo particolare, sono invisibili all’utente, ma servono per spostare la pagina fino a quel determinato punto.
Ecco un esempio:

<a href="#nome-della-sezione">Vai a Nome della sezione</a>
...
<h2><a name="nome-della-sezione"></a>Nome della sezione</h2>
<p>Testo della sezione</p>

jQuery: come rendere fluido lo scorrimento delle pagine web?

Notiamo che il passaggio da una sezione a un’altra non è fluido.
Per ottenere questo effetto, cioè l’effetto scorrimento verticale morbido, possiamo usare la libreria JavaScript jQuery.
Ecco qual’è il codice da inserire:

$('a[href*=#]').click(function() {
	if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
  && location.hostname == this.hostname) {
  var $target = $(this.hash);
  $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
  if ($target.length) {
  var targetOffset = $target.offset().top;
  $('html,body').animate({scrollTop: targetOffset}, 1000);
  return false;}
  }
 });

Articoli correlati:

1. jQuery e Web Designer: 20+ consigli utili e trucchi per tutti i siti!
2. jQuery: imparare le basi con toggle. Mostra e nascondi con stile!
3. CSS3 Columns e jQuery: layout multi-colonne ad altezza pari

Articoli correlati:

1. Cosa è HTML5? Ecco una infografica che lo spiega!
2. 10+ HTML5-CSS3 Website Template: per iniziare a progettare il web di domani!
3. HTML5: tag nuovi e anteprima delle novità