Della serie: "Le dimensioni contano..."

Ed eccomi alle prese con uno degli apparecchietti che ogni tanto vado a ispezionare...
Sì, mi occupo della certificazione di attrezzature a pressione secondo la PED, o più burocraticamente secondo la direttiva 97/23/CE. Quindi di volta in volta mi capita di andare a vedere un po' di ferro!
E proprio ieri ho avuto l'opportunita di occuparmi del collaudo di questo 'piccolo' recipiente per GPL.


In fondo è un semplicissimo serbatoio, qualche lamiera arrotolata e saldata a formare un palloncino per 200 m³ di GPL.
Oggi parlando degli spessori delle lamiere con un mio collega universitario, che suo malgrado non ha molta dimestichezza con il ferro, ho capito ancor di più come la sola università non sia sufficiente a trasmettere agli studenti, me compreso, un'idea della realtà.
Almeno, io sono dell'idea che sia meglio una formula a memoria in meno ma un esempio concreto in più!

Altre due immagini per elogiare l'opera!


E' nuovo! Solo che essendo in acciaio al carbonio si arrugginisce!


Ciao a tutti!
Andrea

Mostrare una nota al passaggio del mouse

Dopo aver implementato il "doppio-click seleziona tutto", mi sono accorto che sarebbe stato opportuno segnalare questa comodità al 'potenziale' visitatore!

Ho pensato quindi che sarebbe stato comodo mostrare una nota a fianco al cursore del mouse quando questo fosse stato sopra del codice!

Questa l'idea, il problema era realizzarla vista la mia scarsa conoscenza dei layer di html...
Ma gira che ti rigira, ho capito che avrei potuto fare a meno di questi famigerati layer, anzi con l'inimitabile tag <div> e qualche riga di javascript, avrei ottenuto il risultato desiderato! C'è da dire che anche i CSS hanno fatto la loro parte!
Ecco come ho risolto!

All'interno del post ho inserito un tag <div> "invisibile":

<div id="myLayer" style="
position: absolute; z-index: 1;
-moz-opacity:0.4; filter:alpha(opacity=40);
border: 0px none #000000; font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #333333; width: 120px; height: 39px;
background: no-repeat url(background_url); visibility: hidden;
padding: 1px 0px 0px 0px;">

Testo da mostrare nella nota
</div>

L'invisibilità si ottiene impostando l'omonima proprietà visibility dell'attributo style su hidden. Grazie alle proprietà -moz-opacity e filter: alpha(opacity = ...) si può impostare il valore di trasparenza del tag <div>, la prima serve per firefox, la seconda per internet explorer... Altra proprietà molto importante per il mio scopo è position, che impostato a absolute, permette di posizionare il tag secondo coordinate assolute riferite ai bordi alla pagina. Le coordinate, e quindi la posizione, si definiscono tramite le proprietà left e top che permettono di impostare la distanza dal bordo sinistro e da quello superiore della pagina.

Per la parte dinamica mi sono affidato a javascript, impostando tramite gli attributi onMouseOver e onMouseOut la modifica della visibilità del tag <div>:

function M_Out(){
 document.getElementById("myLayer").style.visibility = "hidden";
}

function M_Over() {
 document.getElementById("myLayer").innerHTML = "<center><b>Doppio Click per<br>selezionare tutto!</b></center>";
 document.getElementById("myLayer").style.visibility = "visible";
}

Per lo spostamento della nota legato al movimento del cursore del mouse ho utilizzato l'attributo onMouseMove:

onMouseMove = 
'document.getElementById("myLayer").style.left=event.clientX+window.pageXOffset+10+"px"; 
document.getElementById("myLayer").style.top=event.clientY+window.pageYOffset+10+"px";'

impostando dinamicamente i valori delle proprietà top e left.

Il risultato lo potete ammirare passando il mouse sopra al codice!

Spero vi possa tornare utile!
Ciao,
Andrea

Selezionare tutto il 'codice' con doppio click

Selezionare contenuto di un tag con doppio click

Oggi, cercando di migliorare ancora la grafica e la funzionalità del blog, mi sono imbattuto nella ricerca di uno script che permettesse di selezionare tutto il testo contenuto all'interno di un tag Html.

La mia idea era fare in modo che con un doppio click sul testo del codice questo venisse selezionato tutto!

Dopo un po' di ricerche mi sono imbatutto in questa pagina: http://4umi.com/web/javascript/select.htm.
Lo è stato script realizzato da Yann-Erwan Perio e permette di selezionare tutto il contenuto di un tag passandogli il relativo id!

Quindi sono passato subito all'implementazione nel blog!
Per prima cosa ho copiato lo script e importato all'interno del template di blogger, subito dopo il tag <body>:

<script src='link_to_script.js' type='text/javascript'/>
</script>

Sfruttando l'evento ondblclick del tag <pre> invoco la funzione:

<pre ondblclick = "Utils.Selection.clear(); Utils.Selection.add( Utils.Ranges.selectNode(Utils.DOM.getElementWithId(this.id) ));" id="pre_01">

   /*  ---  CODICE  ---  */

</pre>

Doppio click sul 'codice'... funziona!
Provare per credere!

Ciao,
Andrea

Come ti personalizzo il blog (2)...

Creare menù a discesa per etichette post

E per la serie come personalizzare il blog, ho modificato il widget delle etichette per far sì che creasse un semplice menù a discesa riepilogativo, evitando che la sidebar assumesse dimensioni proibitive!

Questo è il codice:

<b:widget id='Label1' locked='false' title='Etichette' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<select class='sidebar_select' name='select_etichette' onChange='document.location.replace(this.value);'>
<b:if cond='data:blog.url == "http://tommity.blogspot.com"'>
 <option selected='selected' value='http://tommity.blogspot.com'>Tutto</option>
<b:else/>
<option value='http://tommity.blogspot.com'>Tutto</option>
</b:if>
<b:loop values='data:labels' var='label'>
<b:if cond='data:blog.url == data:label.url'>
 <option expr:value='data:label.url' selected='selected'><data:label.name/> (<data:label.count/>)</option>
<b:else/>
 <option expr:value='data:label.url'><data:label.name/> (<data:label.count/>)</option>
</b:if>
</b:loop>
</select>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Sfruttando i tag <b:if> e <b:loop> costruisco un menu a tendina, usando il tag html <select>.
La sintassi del tag <select> è molto semplice, gli attributi degni di nota sono: class che permette di applicare uno stile css e onChange che permette di eseguire un comando ogni volta che viene selezionata una voce diversa dal menù a discesa. Il comando che viene eseguito è scritto in javascript ed è: document.location.replace(this.value), questo permette di reindirizzare il browser verso il link riportato nell'attributo value dei tag <option>.

I due <b:if> permettono di evidenziare la voce selezionata dopo che è stata ricaricata la pagina, grazie all'aggiunta dell'attributo selected="selected" nel tag <option>.

Il <b:loop> esegue un ciclo sulle etichette utilizzate nel blog, permette di elencarle e quindi di compilare il menù a tendina.

La guida ufficiale per i comandi widget la trovate qui, mentre l'elenco delle variabili che si possono utilizzare all'interno dei widget lo trovate qui.

Tornando all'attributo class del tag <select> per poter personalizzare l'aspetto del menù, si deve aggiungere all'interno dei tag <style> una classe ad hoc, tipo questa:

.sidebar_select{
background-color: #EEEEEE;
color: #6699CC;
font: 11px Verdana;
}

Questo è quanto, il risultato è visibile qui accanto! ——>
Spero possa esservi utile,
ciao!
Andrea

Buon Anno!!

Ed eccoci qui...
Un altro anno si è concluso, dovrei essere più maturo, più saggio...
Sinceramente non mi sento né più maturo né più saggio. Anzi, certi discorsi politici mi hanno lasciato, per usare un eufemismo, di stucco.
Probabilmente sono io anormale, o meglio io e le persone che ho avuto modo di incontrare in questi giorni di feste. Sì, perché avendo l'opportunità di lavorare nel negozio di famiglia, dove ancora esiste un rapporto con il cliente - non me ne vogliano le grandi catene, ma trovare commessi cortesi e disponibili è sempre più difficile, cosa che mi conferma anche la mia ragazza, tengo a precisare che lei è una commessa della grande distribuzione - ho avuto modo di tastare l'umore della popolazione, per dirla con paroloni.
Insomma, ho sentito molti pareri, discordanti per alcuni aspetti, ma tutti concordi nell'idea che così non si possa andare avanti!
E come verrebbe da pensare, non parlo così perché sono un "commerciante", perché fortunatamente, la laurea in scienza del pongo che non ho, mi ha premesso di trovare lavoro ancor prima di essermi laureato e di conseguenza sono anche un "impiegato", di quelli con il contratto scaduto da un anno, precari e chi più ne ha più ne metta...
Però obiettivamente devo dire che per me l'idea di questi contratti a tempo determinato, magari anche part-time, sono l'ideale per uno studente-lavoratore. Anche perché oggi giorno il titolo conta, ma fino ad un certo punto... E' inutile, secondo me, fregiarsi di lauree con il massimo dei voti e non sapere neanche cosa significhi passare otto ore in un ufficio. Per di più vogliamo mettere quante cose si imparano in un ufficio, magari affiancati da qualcuno che conosce il mestiere, rispetto a quel che si può imparare all'università?
Io sono dell'idea, e spero di riuscire nel mio intento, di farmi un po' le ossa nel mondo del lavoro, ovviamente allungando la mia carriera universitaria, ma spero che alla fine l'esperienza valga più del ritardo con cui spero di ri-laurearmi.
E quindi per me è iniziato un nuovo anno, in salita, ma che spero di riuscire a scalare!

E quindi pronti, partenza... VIA!

Alla prossima,
Andrea

PS: Chi si ferma è perduto!