Risorse per Web designer – yes WEB can

CssDesk è un editor CSS online che supporta anche CSS3. Se dovete fare delle veloci prove, sperimentare un trucchetto letto su qualche blog oppure mostrare il funzionamento di un codice a qualcuno allora CSS DESK è quello che fa per voi.

Questa utile web application è davvero molto semplice da usare. Vi basterà scrivere sulla sinistra il codice HTML e il codice CSS che volete testare e in tempo reale sulla destra vi apparirà il risultato. Inoltre avete la possibilità di usare l’auto highlighting (ovvero la colorazione del codice), cambiare il pattern di background e scaricare o condividere il codice creato.
Semplice no?

CSS Desk potete trovarlo qui: CSSdesk.com

Altro strumento molto interessante è JS Bin. Si tratta di un altra web application molto interessante che oltre a darvi la possibilità di creare e condividere codice in Html e Css vi permette di utilizzare anche Javascript. Il funzionamento è simile a CSS Desk, ma in questo caso sul lato sinistro dovete inserire il codice Javascript che vi interessa, sul lato destro invece il codice HTML e CSS (utilizzando però il tag style), mentre per vedere l’anteprima di quel che avete creato vi basterà cliccare su Preview.

Inoltre JS Bin vi permette anche di includere e utilizzare librerie come JQuery, Prototype, Mootols, script_aculo e di condividere e scaricare il risultato delle vostre prove.
JS Bin potete trovarlo qui: JSBin.com

Ovviamente questi servizi non sono la migliore soluzione per lo sviluppo di siti complessi, ma credo siano gli ideali per fare le vostre piccole prove.
Che ne dite? Li userete?

Se chiedete a qualche web designer esperto, sopratutto tra quelli di vecchia data, quale libro considerano assolutamente da leggere, tutti risponderanno “Progettare siti web standard” di Jeffrey Zeldman. Personalmente, credo che questo libro sia una pietra miliare del moderno web design, tanto che dopo averlo letto non solo ho cambiato il modo di progettare siti ma proprio il modo di intendere il web.

Ma Zeldman non è famoso solo per le sue opere cartacee, lui è un noto webdesigner, ideatore del progetto The Web standard Project ed editore del conosciutissimo sito A List Apart, ottima risorsa per le “persone che creano il Web”.

Ed è proprio di questa famosissima risorsa che vi voglio parlare, o meglio del nuovo interessante progetto Italian A List Apart, che è il sito con le traduzioni degli articoli di ALA in Italiano.

Appena ho saputo dell’iniziativa, incuriosito, ho deciso di seguire il progetto e cercare di scoprire chi fossero le persone che gli hanno dato vita, così ho conosciuto la fondatrice del progetto Valeria Brigatti, e dato che nessuno meglio di lei avrebbe potuto descriverci l’iniziativa ne ho approfittato per fargli questa intervista:

1. Ciao Valeria e benvenuta su yesWEBcan, perché hai avuto l’idea di tradurre gli articoli di A List Apart in Italiano?

Ho conosciuto “A List Apart” anni fa e mi sono subito resa conto del grande valore degli articoli pubblicati. Negli anni ho collaborato con diversi professionisti italiani del web e ho notato che la maggior parte di essi non conosceva l’inglese ad un livello tale da potersi documentare e tenersi aggiornati adeguatamente leggendo articoli in inglese e consultando siti web del settore (i più aggiornati solitamente sono quelli americani).
Penso che nessuna persona che lavori nel web debba ignorare “A List Apart”, pertanto ho deciso di tradurre sistematicamente tutti gli articoli pubblicati da “A List Apart” in “Italian A List Apart”, sito autorizzato dalla redazione americana a pubblicare le traduzioni in italiano.

2. Chi sono le persone che compongono il team? Come si può entrare a farne parte?

Il team è composto da me, fondatrice e creative director, e da Carlo Brigatti, co-fondatore. Carlo si occupa della parte tecnica del sito e della gestione dello stesso. Inoltre, sono sue le fantastiche illustrazioni che accompagnano ogni numero. Io mi occupo delle traduzioni, della parte amministrativa e collaboro allo sviluppo del sito. Entrambi ci occupiamo del marketing del sito.
Per il momento non è previsto alcun ampliamento del team.
Potete far parte del mondo Italian “A List Apart” commentando gli articoli che pubblichiamo ogni quindici giorni, seguendoci su Twitter (@ItalianALA) ed unendovi al gruppo “Italian A List Apart” su Facebook

3. Come funziona Italian A List Apart?

I nostri accordi con la redazione di “A List Apart” ci impongono di pubblicare gli articoli tradotti quindici giorni dopo la pubblicazione degli originali. Abbiamo completa autonomia decisionale per quel che riguarda la gestione del sito web, con l’unico obbligo di rispettare i criteri di usabilità ed accessibilità e le linee guida dettate dagli standard web e note a tutti quelli che leggono gli articoli di “A List Apart” o le pubblicazioni di Zeldman, Meyer e soci.
Carlo ed io non percepiamo alcun compenso per la nostra attività: è tutto su base volontaria. Siamo però autorizzati a pubblicizzare il sito e ad avere sponsor con cui ripagare i costi del sito.

4. Il progetto è ancora in fase embrionale, quindi difficile fare bilanci, ma quali sono le vostre prospettive future?

Il sito ha già avuto diversi riscontri positivi. Al momento stiamo ultimando il back-end e aggiungendo funzionalità che a breve saranno online. Naturalmente uno dei nostri obiettivi principali è quello di far conoscere il sito agli operatori del web italiano, alle persone “che creano il web”, come cita il nostro claim.
Per il resto non posso svelare ora i piani futuri, ma abbiamo delle idee

5. Vuoi aggiungere qualcosa?

Mi auguro che il nostro lavoro di traduzione e pubblicazione degli articoli sia benvenuto dai professionisti del web italiano!

Ringrazio Valeria per la disponibilità e le faccio un forte in bocca al lupo per il successo del progetto.

Avete mai sentito parlare di Object Oriented CSS?

Simone D’Amico ne ha scritto un articolo che è stato pubblicato su html.it.

In parole povere l’Object Oriented Css, applica la “programmazione ad oggetti“, tipica dei linguaggi di programmazione, al CSS. Ciò significa che è possibile sfruttare le caratteristiche dell’OOP anche con i CSS in maniera da rendere più modulare, riusabile e manutenibile il codice, permettendoci di migliorarlo e velocizzarne le operazioni di stesura, modifica e riuso.
Tutto il paradigma è incentrato su due concetti molto importanti:

• Separare il contenitore dal contenuto
• Separare la struttura principale della pagina dal design

Per una panoramica completa, vi consiglio di leggere l’intero articolo.

Complimenti a Simone il capace Web Designer ciociaro che per la seconda volta ha visto un suo articolo pubblicato da HTML.it, il sito di web design e web developing piu conosciuto d’Italia.

Fan Box è un widget di Facebook che, incorporato su un sito web, mostra informazioni relative alla nostra fanpage, tipo i post inseriti, il numero e la foto dei fan, e il tasto ”Become a Fan” .
Inserirlo è semplicissimo basta andare sulla Pagina Fan di Facebook, cliccare sul link “Aggiungi riquadro dei fan al tuo sito”, copiare il codice che è stato generato ed incollarlo sul sito dove volete far comparire il Widget.

Il codice da inserire sarà simile a questo:

<script type="text/javascript" src="http:...................../it_IT"></script>
<script type="text/javascript">FB.init("e7cd4ad4e769e764c0c5b84f7a");</script>
<fb:fan profile_id="TUOID" stream="" connections="10" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px">

Molto semplice e veloce.

Lo scopo di questo tutorial però è mostrarvi come fare a modificarlo.

Per modificare la larghezza basterà operare qui:

<fb:fan profile_id="TUOID" stream="" connections="10" width="300"></fb:fan>

modificando il valore del parametro width, per modificare il numero di foto di fan da visualizzare invece basterà modificare il parametro connections, mentre discorso a parte va fatto se siete intenzionati a cambiarne il design. Per farlo avete bisogno di crearvi un foglio di stile ad hoc.

Per prima cosa nel codice va inserito il parametro “CSS” al quale va assegnato l’url del foglio di stile.

Ecco un esempio:

<fb:fan profile_id="VOSTRO ID" stream="" connections="10" width="287" 
css="http://www.yeswebcan.it/fbstyle.css"></fb:fan>

Ora non ci resta che creare il css. Per conoscere i nomi dei blocchi da modificare vi occorrerà uno strumento come la Barra Web Developer di Firefox.

Questo è il foglio di stile che ho creato per yesWEBcan. Per me non ho dovuto modificare moltissimi parametri.

@charset "utf-8";
/* Facebook Fanbox */
 
.fan_box
.full_widget
.connect_top 
{
display: block;
background-color: #e19238;           /* Cambio il background al blocco connect */
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: center;
}
 
a
{
cursor: pointer;
color: black;              /* Cambio il colore del link col nome della fanpage */
outline-style: none;
text-decoration: none;
}
.fan_box .connections
{
border-top-width: 1px;
border-top-style: solid;
border-top-color: #d8dfea;
padding-top: 10px;
padding-right: 0pt;
padding-bottom: 4px;
padding-left: 5px;            /* Riduco i margini per far comparire più foto */
min-height: 150px;
 
}
 
.fan_box
.full_widget
{
margin:2px;                         /* Imposto margine 2 */
margin-bottom:10px;
border:1px solid #455c6c;     /* Aggiungo un bordo di un pixel */
}

Potete scaricarlo anche qui.

IMPORTANTE: Una volta pubblicato, il css rimane in memoria, quindi se successivamente vorrete effettuare altre modifiche queste non saranno a voi visibili neanche cancellando o disattivando la cache del browser. Il problema è facilmente risolvibile e ne parlo in quest’articolo

L’occasione è gradita per invitarvi a iscrivervi alla fanpage di yesWEBcan.it

Durante la personalizzazione di un widget ho dovuto affrontare un problema davvero noioso.  Modificando il CSS, questo non veniva memorizzato nella cache del browser ma veniva come incorporato nell’API .

Il risultato? Il widget, anche cancellando o disattivando la cache del browser, veniva visualizzato sempre con  la vecchia versione del CSS, nascondendo le modifiche che di volta in volta effettuavo.

Il problema è molto noto, può presentarsi anche caricando immagini con script, oppure lavorando con  filmati flash, con ajax, con Javascript ecc…

Sono stato costretto a correre ai ripari, e ho cominciato a cercare qualche soluzione.

La prima soluzione a cui ho pensato è stata cambiare ogni volta nome al foglio di stile. Il Problema veniva così risolto ma ogni volta dovevo rinominare il css via ftp e modificare  il link che lo richiamava nella pagina.

Visto che il procedimento era molto lento sono stato costretto a cercare un alternativa. Grazie a Google ho scoperto che Stephen Hayden ha proposto un trucchetto per ovviare il problema. Il trucco consiste  nell’aggiungere una variabile GET alla fine del richiamo del file CSS, proprio  come accade per le pagine dinamiche;

Il codice sarebbe tipo questo:

 <link rel="stylesheet" href="http://yeswebcan.it/style.css?version=1" 
type="text/css" />

In questo modo non è più necessario rinominare il CSS, basta cambiare il valore alla variabile version ad ogni modifica. Procedura più veloce della precedente ma pur sempre macchinosa.

Allora ho pensato di aggiungerci un piccolo accorgimento. Niente di più semplice, mi sono limitato a generare in modo casuale (random) il valore della variabile GET tramite PHP. In questo modo sono riuscito a dare automaticamente un valore diverso alla variabile, costringendo il browser a richiedere ogni volta il file CSS al server.

Ecco il codice di esempio:

http://www.sito.it/style.css?version=<?php $code=rand(5,130); echo"$code";?>

Viene generato un numero random compreso tra 5 e 130 (ho scelto tali numeri senza alcun criterio, potete utilizzare una qualsiasi coppia di numeri interi)

L’esempio per un immagine sarebbe:

<img src=”img.jpg?visual=<?php $code=rand(5,130); echo “$code”;?>alt=”prova”/>