tinyMCE, textarea con i controcoglioni…

oggi vi parlo di una cosetta che ho scoperto da poco, ma che a quanto pare esiste da una vita: tinyMCE. E’ l’editor di testo che usa, tra gli altri, WordPress per consentire a tutti di creare i propri post senza necessariamente conoscere l’HTML (tecnicamente: WYSIWYG editor).
Mi ha molto stupito la semplicita’ d’uso e la configurabilita’ dello strumento:

si aggiunge il riferimento alla libreria javascript:

<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>

(opportunamente scaricata da qui)

e si inizializza il vettore di configurazione:

<script language="javascript" type="text/javascript">
tinyMCE.init({
	theme : "simple",
	mode : "textareas"
});
</script>

in questo modo stiamo dicendo di utilizzare una versione minimale del componente, ovvero solo alcune opzioni di formattazione tipo grassetto, corsivo, sottolineato, allineamenti vari ed elenchi puntati e numerati.
E’ possibile utilizzare molte altre opzioni a partire dal colore del testo fino all’inserimento di emoticon, passando per i collegamenti ipertestuali…
Da notare che la proprieta’ mode dice che TUTTE le textarea della pagina saranno convertite in editor HTML, sono disponibili molte altre opzioni che consentono una configurazione piu’ fine, ma per questa rimando alla documentazione ufficiale.

et voila’… abbiamo nel nostro form html una textarea potenziata, che consente all’utente di formattare il testo per il proprio sito web, senza rompere gli zebedei al webmaster di turno con continue richieste al livello di:
“ma non si potrebbero mettere in grassetto la 1^ e la 3^ lettera ? e il titolo in corsivo? e un link a guuugle nella 5^ riga?“…

…facile no?

css e firefox… mo ci divertiamo

premetto: adoro firefox.

mi piace da quando si chiamava phoenix, che poi e’ diventato firebird per motivi di copyright del nome della Phoenix Foundation^[1] (mai mettersi contro Mac Gyver…).

che poi e’ diventato Firefox per via del Database open source Firebird (derivato da Interbase), che pur non detenendo diritti sul nome era gia’ in giro da diversi anni (in effetti chiamarlo firebird fu una scelta abbastanza infelice) .

Che poi e’ diventato… ah no, si chiama ancora Firefox (hanno avuto la decenza di registrarlo sto nome, cosi’ evitano di cambiarlo ancora, o fanno causa a chi lo usa in modo improprio (?!?)) ..

 

Ma digressioni a parte, c’e’ una cosa che ho sempre detestato in questo mitico browser: i controlli predefiniti, ovvero i pulsanti, caselle di riepilogo e di testo che vengono visualizzate nelle pagine web che non hanno un foglio di stile che li definisca. Odio QUESTO:

Oggi dopo tanto tempo mi sono messo a cercare un rimedio, che si e’ rivelato molto piu’ semplice del previsto:

Firefox dispone di un foglio di stile predefinito, posto in “/usr/lib/firefox/res/forms.css” (nella mia Kubuntu).

aggiornamento: in windows si trova in <$PROGRAMMI>/Mozilla Firefox/res/forms.css

Basta modificare quello e…

MAGIA

 

tutto diventa piu’ gradevole… (a mio avviso)

wordpress non mi consente di uploadare il mio file modificato e non ho voglia (adesso, domani chissa’) di spulciare per metterlo su qualche server esterno, comunque il codice che ho aggiornato in quel file e’:

 

input {
-moz-appearance: textfield;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for buttons, and for <select> (including its
internal padding magic) */
padding: 1px 0 1px 0;
border: 2px inset ThreeDFace;
background-color: -moz-Field;
color: -moz-FieldText;
font: -moz-field;
line-height: normal !important;
text-align: start;
text-transform: none;
word-spacing: normal;
letter-spacing: normal;
cursor: text;
-moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields");
text-indent: 0;
-moz-user-select: text;
border-top: solid;
border-left: solid;
border-bottom:solid;
border-right:solid;
border-color: #3F4B50;
border-width: 1px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
}


e questo


button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
-moz-appearance: button;
/* The sum of border-top, border-bottom, padding-top, padding-bottom
must be the same here, for text inputs, and for <select>. For
buttons, make sure to include the -moz-focus-inner border/padding. */
padding: 0px 6px 0px 6px;
border: 2px outset ButtonFace;
background-color: ButtonFace;
color: ButtonText;
font: -moz-button;
line-height: normal !important;
white-space: pre;
cursor: default;
-moz-box-sizing: border-box;
-moz-user-select: none;
-moz-binding: none;
text-align: center;
border-top: solid;
border-left: solid;
border-bottom:solid;
border-right:solid;
border-color: #3F4B50;
border-width: 1px;
margin-top: 2px;
margin-bottom: 2px;
margin-left: 2px;
margin-right: 2px;
}

Ovviamente e’ il prodotto di tre minuti di sviluppo, sicuramente molti di voi sapranno fare di meglio…

happy coding…

[1] in realta’ era la Phoenix Technologies

Safari: meglio quelli in Africa…

Ieri ho letto dell’uscita in pompa magna di Safari, il mitico browser “made in Cupertino” (basato su khtml di kde), al suo sbarco sulla piattaforma “ostile” Windows…

Ovviamente ho voluto provarlo ad ogni costo…

Risultato della prova on the road?

INSUFFICIENTE

e procedo motivando il voto:

• Proxy: rileva il proxy e mi richiede user e password; dopo l’immissione crasha miseramente.
• Bookmarks: se si prova a salvare o ad accedere ai segnalibri crasha miseramente.
• Interfaccia: i bottoni e i pannelli di configurazione sono in “stile Mac, assolutamente alieni al sistema che li ospita (ma questo era prevedibile, visti QuickTime e iTunes).
• Aggiornamento automatico: applicazione standalone (mentre si potevano usare benissimo quelli di windows – come fa Flash). Ad ogni aggiornamento ti preseleziona l’installazione di QuickTime e iTunes.
• Rendering delle pagine (le poche locali che ho potuto provare): sembra essere effettivamente rapido, ma non lo considererei un pregio di Safari, quanto di WebKit.

se a tutto questo aggiungiamo che in meno di due giorni sono state scoperte 18 vulnerabilita’, beh… vedete un po’ voi…

FireFox Extension: ScreenGrab!!!!

ho appena scoperto un’estensione per firefox molto utile per lo sviluppatore web, ma anche chi ha un blog e vuol fare qualche screenshot delle pagine da segnalare: SCREENGRAB.

Appena installata si piazza nella barra inferiore di Firefox e al click presenta un menu per salvare negli appunti o su disco o la pagina web che si sta visitando in una delle tre modalita’:

• completa (salva tutta la pagina)
• visibile (salva solo la parte visibile attualmente)
• selezione (la pagina si oscura e ci permette di selezionare un’area di ritaglio da copiare)

In parole povere consente di salvare velocemente una pagina web per poterla utilizzare come meglio di vuole in un formato piu’ “trasportabile” (io l’ho usata per inviare ad un mio amico la visualizzazione in firefox di un suo sito…).