24 marzo 2009

Un Semplice Test in Python

Un semplice test in Python. Il pezzo di codice da testare va inserito tra le variabili start e end.
Il tempo puo essere impostato a vostra discrezione, in base alla porzione di codice da voi desiderato.

>>> def test_speed():
... import time
... start = time.time()
... def main():
... print 'Bullett....'
... main()
... end = time.time() - start
... assert end < 10, \
... "spiacente il codice supera i 10 secondi!"
...
>>> test_speed()
Bullett....
>>>

23 marzo 2009

Nuova Release Dello Gnomo








Buon Divertimento.

Proprietà CSS per Elaborare il Testo

Il testo, in una pagina web, e l'elemento che determina più di ogni altro componente, la bellezza e la particolarità(tra cui la leggibilità in primis)della stessa.

I Cascading Style Sheets, hanno introdotto proprietà per il tag font dalle potenzialità molto vicine a quelli della carta stampata. Ecco cosa possiamo ottenere con le sole proprietà letter-spacing, e vertical-align, su di un semplice font della famiglia sans-serif.

Il corpo del documento(body) e impostato con una grandezza del font a 1.2em, una famiglia di font sans-serif, e la spaziatura(letter-spacing) tra le lettere a normale. Mentre h1, ha un valore di spaziatura tra le lettere, negativo di -5px, il secondo h2 ha un valore di spaziatura di 1.25em.

Sub e sup(subscript, e superscript), sub viene allineato verticalmente in modo negativo al -100%, mentre sup in modo verticale al 100% della possibilità. Chiudono le due classi impostate cosi, .prima-classe con una spaziatura tra le lettere di 3pixel, e .seconda-classe con una spaziatura a normale(normal;).


Questo e l'esempio completo del markup e del Css.

<html>

<head>

<title>letter-spacing, vertical-align</title>

<style type="text/css">

body {

font-size: 1.2em;
font-family: arial, helvetica, sans-serif;
letter-spacing: normal;
}

h1 {

letter-spacing: -5px;
}

h2 {

letter-spacing: 1.25em;
}

sub {

vertical-align: -100%;
}

sup {

vertical-align: 100%;
}

.prima-classe {

letter-spacing: 3px;
}

.seconda-classe {

letter-spacing: normal;
}


</style>

</head>

<body>

<div id="contenitore">

<h1> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h1>

<p class="prima-classe"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<h2> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</h2>

<h3>Lorem ipsum dolor <sup>sit amet,</sup> consectetuer <sub>adipiscing elit.</sub><br />

<span class="seconda-classe"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span></h3>
</div>

</body>
</html>



Layout Centrato

Una semplice pagina resa impostando #container con i margini superiore e inferiore a 0, e il margine sinistro e destro su auto. La larghezza width impostata a 500px, e un blockquote come sopra impostato opx margine superiore e inferiore, e margine sinistro e destro a 100px.

Per quanti non sapessero come funzionano i margini, semplicemente si segue il senso orario, vale a dire: margine-superiore, margine-destro, margine-inferiore, e margine-sinistro.

Vediamo il markup html.

<html>

<body>


<div id="container">

<h1>A Title</h1>

<h2>A Sub Title</h2>

<p>Tristique quis, convallis ac, tempor eu, nisl. Morbi mauris.
a that will live on through the generations.</p>

<blockquote>

<p>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi interdum nisi vitae neque."</p>

</blockquote>


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>

<p>Nunc interdum. Nam eros urna, tristique quis,...</p>

<p>Praesent dictum, risus id feugiat dapibus,...</p>

</div>

</body>

</html>


E le regole Css.


<head>

<style type="text/css">
body {
font: 62.5%/1.5 verdana, arial, helvetica, sans-serif;
color: #000000;
background: #ffffff;
padding: 20px;

}

#container {
font-size: 1.2em;
line-height: 1.5em;
margin: 0 auto;
width: 500px;
}

h1 {
font: 1.5em/1.8em verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
}

h2 {
font:1.2em verdana, arial, helvetica, sans-serif;
text-transform: uppercase;
}

blockquote {
margin: 0 100px;
}

blockquote p {
font-family: "Monotype Corsiva", gautami, serif;
font-size: 1.5em;
}

</style>

</head>
Questo e il risultato finale.

14 marzo 2009

Rendere Visibile un'Immagine Tramite Javascript

Creare un effetto "mostra-nascondi" tramite un piccolo script Javascript, e la modalità CSS Display.

Esempio del markup html:

<html>
<head>

<title>views Image</title>
<script src="evento_load.js"></script>


</head>
<body>
<p><a href="#" onclick="show_image('jaunty');">Click per vedere o nascondere l'immagine!</a></p>
<div id="jaunty" style="display: none;">
<p><img src="jaunty.jpg"></img></p>
</div>
</body>

</html>


E lo script javascript che dopo avere impostato il <div>come display:none, invia l'<id jaunty> alla funzione show_image che essendo none, lo imposta come stringa vuota, che reimposta a display:none.

function show_image(targetId)

{

if (document.getElementById)

{
target = document.getElementById(targetId);

if (target.style.display == "none")

{
target.style.display = "";
}

else

{
target.style.display = "none";
}

}

}

Ecco la pagina prima dell' evento onclick :

















E Dopo: