Come disinstallare Metasploit e Nexpose su Linux

Metasploit:
sudo /opt/metasploit/uninstall

Nexpose:
sudo /opt/rapid7/nexpose/.install4j/uninstall

Taggato con: , , , , , , , , , , ,

Come imparare ad usare Git

Git è uno strumento molto utile, si tratta di un sistema di controllo di versione distribuito. E’ stato creato da Linus Torvald, famoso per essere il padre di Linux. A differenza di svn o cvs in cui la gestione è lasciata in remoto git è un po’ come un p2p. Molto interessante e utile vi lascio alla splendida guida interattiva:http://try.github.com/levels/1/challenges/1

Taggato con: , , , , , , , , , , ,

Usare @media per nascondere i CSS3 ai vecchi broswer

Di solito per gestire le varie versioni dei CSS per i vari broswer si utilizza, un approccio come d’esempio:

<!--[if IE 7]>
	<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
 
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
 
<!--[if IE 5]>
	<link rel="stylesheet" type="text/css" href="ie5.css" />
<![endif]-->
 
<!--[if IE 5.5000]>
        <link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

Ovvero si va a definire dei fogli di stile che vadano a mettere una pezza alle mancanze. Con un enorme mole di lavoro aggiunta. Una soluzione alternativa può consistere nell’utilizzare il tag CSS3 @media con l’opzione only come leggiamo dalla specifica di Media Queries

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

Quindi solo i broswer che riescono leggere l’opzione only riusciranno a interpretare il blocco di codice, gli altri invece lo ignoreranno.

Ecco un esempio di come funziona:

@media only screen {
    /* codice CSS2 non supportato o CSS3 */
    h1
    {
       text-shadow: 5px 5px 5px #0099FF;
    }
}

Forse questo non ci libererà completamente dal dover sistemare i problemi di incompatibilità usando l’if sulla versione, ma almeno qualche rogna ce la toglie!

Taggato con: , , , , , , , , ,

Creare un pulsante in stile WEB 2.0 con i CSS

Qui il Live Demo e qui il Codice Sorgente

Con questo tutorial presentiamo un pulsante in stile Web 2.0. Il design, come prassi, è minimale e pulito con l’utilizzo di bordi arrotondati e colori sfumati. In questo esempio presenta un testo evidenziato e uno descrittivo. L’utilizzo di questa componente è particolarmente adatta per le offerte.

Per prima cosa andiamo ad inserire un div usato come pulsante utilizzando l’attributo onclick per far eseguire il javascript location.href=’link.html’ per cambiare pagina:

<div class="pulsante" onclick="location.href='link.html'">
   <h1 class="pulsante">Pulsante WEB 2.0</h1>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
   Cras et enim at orci molestie faucibus at ut diam.
<div>

Il CSS relativo alla classe pulsante:

div.pulsante
{
  /* impostiamo i bordi arrotondati per i vari browser*/
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
 
  background: #65a9d7;
 
  /* impostiamo i gradienti per i vari browser */
  background: -webkit-gradient(linear, left top, left bottom, from(#3e77ff), to(#65a9d7));
  background: -webkit-linear-gradient(top, #3e77ff, #65a9d7);
  background: -moz-linear-gradient(top, #3e77ff, #65a9d7);
  background: -ms-linear-gradient(top, #3e77ff, #65a9d7);
  background: -o-linear-gradient(top, #3e77ff, #65a9d7);
 
  /* impostiamo le ombre per i vari browser */
  box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -moz-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -webkit-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
 
  /* impostiamo le dimensioni e le spaziature del pulsante */
  margin: 1em;
  padding: 1em;
  height: 11em;
  width: 11em;
 
  /* se il testo contenuto nel div sborda viene nascosto */
  overflow: hidden;
 
  /* colore del testo*/
  color: #fff;
 
  /* testo centrato e con ombreggiatura */
  text-align: center;
  text-shadow: 0.05em 0.1em 0.05em rgba(0,0,0,0.75);
 
  /* definizione del bordo */
  border-style: solid;
  border-width: 1em;
  border-color: #5e97ff;
 
}

Ora andiamo a definire l’hover del pulsante, ovvero lo stile di quando il mouse entra in contatto con l’oggetto. Il codice sarà pressoché identico al precedente, cambieranno i colori del gradiente che saranno invertiti ed è stato aggiunto il campo cursor che indica al browser di trasformare il puntatore nella manina che indica i link.

div.pulsante:hover
{
  -moz-border-radius: 2em;
  -webkit-border-radius: 2em;
  border-radius: 2em;
 
  background: #65a9d7;
 
  /* come prima ma invertiamo i colori */
  background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e77ff));
  background: -webkit-linear-gradient(top, #65a9d7, #3e77ff);
  background: -moz-linear-gradient(top, #65a9d7, #3e77ff);
  background: -ms-linear-gradient(top, #65a9d7, #3e77ff);
  background: -o-linear-gradient(top, #65a9d7, #3e77ff);
 
  box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -moz-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
  -webkit-box-shadow: 0.3em 0.3em 0.3em rgba(0,0,0,0.3);
 
  margin: 1em;
  padding: 1em;
  height: 11em;
  width: 11em;
 
  overflow: hidden;
 
  /* impostiamo il puntatore affinché appaia la "manina" */
  cursor: pointer;
 
  color: #fff;
 
  text-align: center;
  text-shadow: 0.05em 0.1em 0.05em rgba(0,0,0,0.75);
 
  border-style: solid;
  border-width: 1em;
  border-color: #5e97ff;
}

Infine andiamo a definire il titolo del pulsante

h1.pulsante
{
   font-size: 1.4em;
   text-shadow: 0.1em 0.1em 0.1em rgba(0,0,0,0.75); 
}

Qui il Live Demo e qui il Codice Sorgente

Taggato con: , , , , , , , ,

Realizzare un menu orizzontale a scomparsa con jQuery

Qui il Live Demo e qui il Codice Sorgente

I menu a scomparsa sono un ottima soluzione per sfruttare maggiormente l’area visibile della pagina web. Vengono usati molto spesso e sono particolarmente adatti nei casi in cui il testo sia autocontenuto nella finestra.

Iniziamo costruendo una tabella con i div dove al suo interno metteremo una riga, la quale a sua volta conterrà delle celle con le voci del menu. Qui il codice html della sezione:

<header>
   <div id="hidetopsection">&nbsp;</div>
   <div id="topsection">
      <div class="menu_table">
         <div class="menu_table_row">
         <div onclick="location.href='index.php';" class="menu_table_cell">Home<br/><br/></div>
         <div onclick="location.href='chisiamo.php';" class="menu_table_cell">Chi Siamo<br/><br/></div>
         <div onclick="location.href='staff.php';" class="menu_table_cell">Lo staff<br/><br/></div>
         <div onclick="location.href='curriculum.php';" class="menu_table_cell">Curriculum<br/><br/></div>
         <div onclick="location.href='contatti.php';" class="menu_table_cell">Contatti<br/><br/></div>
      </div>
   </div>
</header>

Le voci del menu sono realizzate utilizzando i div come dei pulsanti, con il parametro onclick facciamo eseguire il codice javascript location.href=’index.php’; per aprire il link desiderato. Ed utilizziamo il parametro :hover nel css per far cambiare aspetto al pulsante quando il mouse vi passa in cima. Come possiamo vedere da questo estratto di css:

.menu
{
    margin-left: 1.5em;
    text-align: left;
    margin-top: 1em;
    font-size:  2em;
}
 
div.menu_table{
    display: table;
    font-size: 1.2em;
    line-height: 21px;
    border-spacing: 1px;
    margin: 0px;
    padding: 0px;
}
 
div.menu_table_row{
    display: table-row;
}
 
div.menu_table_cell{
    float: left;
    display: table-cell;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    padding: 10px 20px;
    color: #6d1313;
    cursor: pointer;
}
 
div.menu_table_cell:hover{
    color: white;
    background: #6d1313;
    display: table-cell;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    padding: 10px 20px;
    cursor: pointer;
}

Per abbellire maggiormente il menu importiamo il font utilizzando il comando css @font-face. Qui il codice css della sezione:

@font-face {
  font-family: 'AR Bonnie';
  src: url('../fonts/arbonnie.ttf');
}

Inoltre sempre per abbellimento metteremo un filtro di sfumatura e che va dal bianco (#fff) al grigio (#ddd) con dei margini arrotondati e un effetto di ombra come è possibile vedere dal css:

#topsection{
    position: fixed;
    height: 4em;
    float: left;
    top: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'AR Bonnie';
    border-bottom-right-radius: 0.5em;
    border-bottom-left-radius: 0.5em;
    -moz-border-bottom-right-radius: 0.5em;
    -moz-border-bottom-left-radius: 0.5em;
    -webkit-border-bottom-right-radius: 0.5em;
    -webkit-border-bottom-left-radius: 0.5em;
    box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.3);
    filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#dddddd); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#dddddd)"; 
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd)); 
    background: -moz-linear-gradient(top,  #fff,  #ddd);
    z-index: 1000;
}
 
#hidetopsection{
    position: fixed;
    height: 4em;
    float: left;
    top: 0px;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 1000;
}

Infine inseriremo il seguente javascript a piede della pagina html il quale farà apparire e scomparire il menu con una piccola accortezza, ovvero quella di creare una div invisibile come area di attivazione, poiché il comando fadeOut di jQuery disattiva il div #topsection che contiene il menu

Qui il codice javascript:

   $(document).ready(function() {
      $( "#topsection" ).mouseleave(function(){$(this).fadeOut(500);});
      $( "#hidetopsection" ).mouseenter(function(){$("#topsection").fadeIn(500);});
   });

Qui il Live Demo e qui il Codice Sorgente

Taggato con: , , , , , , , , ,
Top