Yet another web blog: febbraio 2013

mercoledì 27 febbraio 2013

Perl - che linguaggio è? Non l'ho mai sentito

Oggi quando si parla di Perl, si parla di Perl 5, giunto ormai alla versione 10.14 se non erro. Il Perl nacque da un ricercatore della Nasa, Larry Wall, che faceva all’epoca il sistemista. Nacque dal fatto che Larry era insoddisfatto degli strumenti che i sistemi Unix fornivano all’epoca quali sed e awk e volle costruire un linguaggio, all’epoca prettamente sistemistico, che fosse più intuitivo e maneggevole. Ci riuscì bene. Il Perl ha una curva di apprendimento molto facile, lascia ampio spazio alla libertà di espressione e si riescono a fare molte cose con poche righe di codice. Attenzione però, se non volete fare i fighi o se il codice deve essere letto da altri, a non strafare nella sintassi perlica, perchè altrimenti risulta illegibile. Ma questo comunque può risultare un divertimento. Oggi il Perl viene considerato un linguaggio quasi morto; per essere più produttivi, più veloci e per avere codice che possa poi essere compreso da altri programmatori e anche per esigenze di mercato si preferisce (almeno sul web) usare linguaggi venuti dopo (come PHP, ASP, ASP.NET). Il mercato da questo punto di vista è spietato. Il linguaggio Perl comunque sta cercando di rimodernarsi tramite moduli che lo improntano più verso gli oggetti e tramite un’opera mastodontica, una riscrittura completa del codice che porta il nome di Perl 6.

Jquery - inserimento solo di alcuni caratteri dalla tastiera

$("#inputbox").live('keydown', function(e) {
           
  var key = String.fromCharCode(e.keyCode);
                        
  if (e.keyCode >96 && e.keyCode<105) return e.keyCode; 
  // per prendere anche la tastiera numerica
  if (e.which == 65)  {return e.keyCode; } // prende la a minuscola
  if (e.which == 66)  {return e.keyCode; } // prende la b minuscola
  if (e.which == 88)  {return e.keyCode; } // prende la x minuscola
  if (e.which == 89)  {return e.keyCode; } // prende  la y minuscola
                        
  if (isNaN(key)) return false;  // altri tasti che non siano numeri
                         
   if (   e.shiftKey /* Shift */
       || e.which == 9 /* Tab */
       || e.which == 32 /* barra spazio */
       || e.which == 27 /* Escape Key */
       || e.which == 17 /* Control Key */
       || e.which == 91 /* Windows Command Key */
       || e.which == 19 /* Pause Break */
       || e.altKey /* Alt Key */
       || e.which == 93 /* Right Click Point Key */
       || ( e.which >= 35 && e.which <= 40 ) /* Home, End, Arrow Keys */
       || e.which == 45) /* Insert Key */  
      { 
             return false;
        }
  });

Jquery - ciclare sugli elementi dotati di una classe

Il metodo each è un metodo che sostanzialmente sostituisce il ciclo for o il ciclo while. Riesce a individuare ogni tag che ha come classe class=”.passo” e ad applicare una funzione qualsiasi a questo tag con pure un contatore di tutti i tag.

$(" .passo").each(function(index){
            $(this).html(arraypasso[index]);
});

Jquery - limitare numero caratteri in una tabella input

Si risolve con il metodo keypress:

$("#inputbox").live('keypress', function(e) {
           if ($('#inputbox').length >= 2) {
                        e.preventDefault();
           } else {
                       
            ) });

CSS le fondamenta

Classiche proprietà CSS:

Le dimensioni:

margin-top (bottom, right, left), se si mette solo margin la proprietà viene estesa a tutti i bordi. Di solito l’unità di misura è in pixel.
padding-top (bottom, right, left), se si mette solo margin la proprietà viene estesa a tutti i bordi. Di solito l’unità di misura è in pixel.
width
height

I bordi:

border-top (bottom, right, left)
border-top: 1px solid #000;
Lo stile del bordo può anche essere di diverso tipo, zigrinato, punteggiato, con lineette, doppio, anche invisibile.

Il testo:

text-align: left;
text-indent: 100px;
text-transform: capitalize;
vertical-align: 100px;

Lo sfondo, il background:

background-color: #000;
background-image: url(grg);
background: #000 url(grg) repeat scroll;
background: #000 url(grg) repeat-y fixed;

Posizione:
Se si vuole spostare un oggetto, qualunque esso sia, un <div>, uno <span> etc… è necessario definirlo tramite una posizione altrimenti le modifiche sull’oggetto non vengono prese in considerazione.

display: inline;
display: block;
float: left;
clear: both;
position: static;
position: relative;
position: absolute;
top: 100px;
visibility: visible;
visibility: hidden;
z-index: 1;

I fonts e i colori:

color: #515151; (i colori posti in questa maniera si rifanno al modello RGB, cioè Red, Green, Blue, ponendo ad esempio #FF0000 salta fuori un rosso molto vivo, quasi fosforescente)

font-size: 12pt;
line-height: 3px;
font-weight: bold;
font-style: italic; (questo è il così detto corsivo)
text-decoration: underline;
text-decoration: line-through; (questo serve per mettere una riga sopra il testo, in definitiva come effetto di cancellatura per il testo, come si usa nello scrivere a penna)
text-decoration: overline;
font: italic normal bold 12pt/3px “Lucida Grande”, Lucida, Verdana, sans-serif; (sans-serif è un termine francese che significa senza-grazie, ovvero senza abbellimenti del carattere, come riccioli e così via)
font: italic normal bold 12pt/3px “Helvetica Neue”, Arial, Helvetica, Geneva, sans-serif;
font: italic normal bold 12pt/3px Georgia, “Times New Roman”, Times, serif;
font: italic normal bold 12pt/3px “Courier New”, Courier, mono;

venerdì 22 febbraio 2013

HTML - Menu Tab


<ul id="TabMenu1">

<li><a href="http://www.blogger.com/blogger.g?blogID=1148059148575905031#">Item 1</a></li>

<li><a href="http://www.blogger.com/blogger.g?blogID=1148059148575905031#">Item 2</a></li>

<li><a href="http://www.blogger.com/blogger.g?blogID=1148059148575905031#">Item 3</a></li>

<li><a href="http://www.blogger.com/blogger.g?blogID=1148059148575905031#">Item 4</a></li>

</ul>

</div>

<style type="text/css">

#TabMenu1

{

   text-align: left;

   margin: 0px 0 1px 0;

   font-family: Arial;

   font-size: 13px;

   font-weight: normal;

   border-bottom: 1px solid #5594D2;

   list-style-type: none;

   padding: 14px 0px 3px 10px;

}

#TabMenu1 li

{

   display: inline;

}

#TabMenu1 a:link.active, #TabMenu1 a:visited.active, #TabMenu1 a:hover.active

{

   border-bottom: 1px solid #627080;

   background-color: #627080;

   color: #FFFFFF;

   position: relative;

   padding-top: 3px;

   font-weight: normal;

   text-decoration: none;

}

#TabMenu1 a:link, #TabMenu1 a:visited

{

   padding: 3px 4px;

   border: 1px solid #5594D2;

   background-color: #6FA6DE;

   color: #FFFFFF;

   margin-right: 0px;

   text-decoration: none;

   border-bottom: none;

}

#TabMenu1 a:hover

{

   background: #627080;

   color: #FFFFFF;

   font-weight: normal;

   text-decoration: underline;

}

</style>

HTML - Menu fatto con una tendina (select box)


<form action="" name="Menu">

<select id="select1" name="select1">

         <option selected="">Select a link</option>

         <option selected="">Apple Site</option>

         <option selected="">Windows Site</option>

         <option selected="">Perl Italian Site</option>

      </select>

      <input onclick="OnGoMenuFormLink(this.form.Menu)" type="button" value="Go" />

   </form>

mercoledì 13 febbraio 2013

HTML - Menu semplice links con testo

[Link 1]; [Link 2]; [Link 3]; [Link 4]

<div id="TextMenu1">
[<a href="">Link 1</a>]&nbsp;[<a href="">Link 2</a>]&
nbsp;[<a href="">Link 3</a>]&nbsp;[<a href="">Link 4</a>]
</div>

Si possono cambiare i colori a seconda delle azioni che si compiono sul linke
questo è possibile farlo mediante regole CSS.

mouse hover (hover)
link cliccato (visited)
link così come appare (a)
link attivo (active)

<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;

 </style>

HTML - Barre di navigazione

Una semplice barra di navigazione può essere:

<ul class="navbar">
<li><a href=""><img alt="" src="images/img0005.png"></a></li>
<li><a href=""><img alt="" src="images/img0006.png"></a></li>
<li><a href=""><img alt="" src="images/img0007.png"></a></li>
<li><a href=""><img alt="" src="images/img0008.png"></a></li>
</ul>

che è una semplice lista non ordinata a cui è stato applicato uno stile CSS, vale
a dire è stata resa in un'unica linea, gli sono stati tolti i pallini e il contenuto di
ogni elemento è risultato essere un bottone disegnato con un programma di grafica.