Autore: Mr Codematrix

21/05/201418/10/2016 da Mr Codematrix

Gestione file in php

Anche oggi pubblicherò un articolo molto semplice da capire per la gente che sta
imparando di programmare come sapete i miei articoli sono trattati in modo semplice
per far capire ai giovani padawan :D.

Oggi vediamo in specifico come usare alcune funzioni in php per la gestione di file.

<?php  
// Variabile che prende il nome del file 
$doc = 'documento_01.txt';  
$stringa = "Prova scrittura";
  
//Il file esiste?
if(!file_exists($doc))  
   {  
   exit('Il file '.$doc.' non esiste!');  
   } 
//Può essere letto?
else if(!is_readable($doc))  
   {  
   exit('Il file '.$doc.' non può essere letto!');  
   }
//Può essere scritto?
else if(!is_writable($doc))  
   {  
   exit('Il file '.$doc.' non può essere scritto!');  
   }  
  
// Apriamo il file in modalità "a" cioè append se fallisce genera errore
$puntatore = fopen($doc, 'a') or die ('Errore di apertura '.$doc);  

// Scriviamo il file se fallisce genera errore 
fwrite($puntatore, $stringa) or die ('Errore di scrittura '.$doc);  

// Chiudiamo il file  
fclose($puntatore);  
	
  
// visualizziamo il contenuto del file  
$contenuto = file_get_contents($doc);  
echo $contenuto;  
?>

<?php

// Variabile che prende il nome del file

$doc = 'documento_01.txt';

$stringa = "Prova scrittura";

//Il file esiste?

if(!file_exists($doc))

{

exit('Il file '.$doc.' non esiste!');

}

//Può essere letto?

else if(!is_readable($doc))

{

exit('Il file '.$doc.' non può essere letto!');

}

//Può essere scritto?

else if(!is_writable($doc))

{

exit('Il file '.$doc.' non può essere scritto!');

}

// Apriamo il file in modalità "a" cioè append se fallisce genera errore

$puntatore = fopen($doc, 'a') or die ('Errore di apertura '.$doc);

// Scriviamo il file se fallisce genera errore

fwrite($puntatore, $stringa) or die ('Errore di scrittura '.$doc);

// Chiudiamo il file

fclose($puntatore);

// visualizziamo il contenuto del file

$contenuto = file_get_contents($doc);

echo $contenuto;

09/05/201418/10/2016 da Mr Codematrix

Precaricamento delle immagini

Vediamo come mettere la classica immagine di caricamento prima del immagine da visualizzare ottimo per la realizzazione di gallerie personalizzate.

Codice Html

<!DOCTYPE html>
<html>
<head>
<title>Precaricamento delle immagini</title>
    <link href='style.css' rel='stylesheet' type='text/css'>  
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="load.js"></script>
</head>
<body>
    <div id="caricatore" class="caricamento"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Precaricamento delle immagini</title>

</head>

<body>

</body>

</html>

Foglio di stile

div#caricatore {
  border: 1px solid;
}

div#caricatore.caricamento {
  background: url(./img/caricatore.gif) no-repeat center center;
}

div#caricatore {

border: 1px solid;

}

div#caricatore.caricamento {

background: url(./img/caricatore.gif) no-repeat center center;

}

JQuery

// Quando il DOM(Document Object Model) è pronto!
$(function () {
  var img = new Image();

  $(img)
    //Una volta che immagine è stata caricata esegue questo codice.
    .load(function () {
      // Nascondo immagine    
      $(this).hide();
    
      $('#caricatore')
		//Rimuovo la classe caricamento 
        .removeClass('caricamento')
        //Aggiungo la mia immagine
        .append(this);
      // Aggiungo un effetto di disolvenza al immagine
      $(this).fadeIn();
    })
    
	//Gestione Errori
    .error(function () {
		// Notifico che immagine non è stata caricata
		alert( "Immagine non caricata" )	  
    })
    
    // Imposto la src(sorgente) della nostra nuova immagine
    .attr('src', 'http://codematrix.altervista.org/wp-content/uploads/2012/11/schema.png');
});

// Quando il DOM(Document Object Model) è pronto!

$(function () {

var img = new Image();

$(img)

//Una volta che immagine è stata caricata esegue questo codice.

.load(function () {

// Nascondo immagine

$(this).hide();

$('#caricatore')

//Rimuovo la classe caricamento

.removeClass('caricamento')

//Aggiungo la mia immagine

.append(this);

// Aggiungo un effetto di disolvenza al immagine

$(this).fadeIn();

})

//Gestione Errori

.error(function () {

// Notifico che immagine non è stata caricata

alert( "Immagine non caricata" )

})

// Imposto la src(sorgente) della nostra nuova immagine

.attr('src', 'http://codematrix.altervista.org/wp-content/uploads/2012/11/schema.png');

});

30/04/201418/10/2016 da Mr Codematrix

Convertire Djvu in pdf

Oggi vediamo come trasformare un djvu in pdf in due modi uno da programma grafico e altro da shell :D.

Prima di tutto andiamo Ubuntu software center (oppure sudo apt-get install djview) e instaliamo il programma DjView c’e ci servira ad aprire il nostro file djvu.

Ora apriamo il nostro file con DjView dopo averlo fatto basta andare solamente su File->Esport as e segliere in che formato esportarlo ovviamente io ho scelto pdf ma ci sono tantissimi altri formati in cui si può salvare.

Ora passiamo al metodo via shell che per gli smanettoni.
Prima di tutto dobbiamo installare delle dipedenze per questo programma

sudo apt-get install djvulibre-bin ghostscript

1	sudo apt-get install djvulibre-bin ghostscript

Ora andiamo sul sito del programma e lo scarichiamo (http://0x2a.at/s/projects/djvu2pdf)
Nel nostro caso abbiamo scaricato un file deb per io uso sopprattuto ubuntu e debian-like ma da sito precedentemente postato e possibile trovare tutte le info per installare su altri sistemi operativi.

Ora che abbiamo ottenuto il nostro file deb lo installiamo.
Nelle ultime versione di linux basta un doppio click sul icona ma se in questo caso non funzionasse basta usare il seguente comando.

sudo dpkg -i djvu2pdf_0.9.2-1_all.deb

1	sudo dpkg -i djvu2pdf_0.9.2-1_all.deb

Dopo aver fatto tutto ciò siamo pronti per usare il nostro programma
Per convertire il nostro file basterà fare il seguente comando.

djvu2pdf documento.djvu

1	djvu2pdf documento.djvu

Se invecce abbiamo piu di un file

djvu2pdf documento1.djvu documento2.djvu

1	djvu2pdf documento1.djvu documento2.djvu

Ovviamente il file creato avrà il nome del file djvu.

19/04/201418/10/2016 da Mr Codematrix

Censurare le parole in Python

Semplice uso di una funziona da aggiungere magari in una chat per censurare
delle parole vietate.

#Questo script e composto da una funziona che prende 3 parametri
#1)Il testo
#2)La parola da censuare
#3)Il carattere con quale censurare

def censura(testo,parola,char):
    testo = testo.split()
    for i in range(0, len(testo)):
        if testo[i] == parola:
            testo[i] = char * len(testo)
        else:
            continue
    return " ".join(testo)
    
print censura("Ma che cavolo !!","cavolo","-")

#Questo script e composto da una funziona che prende 3 parametri

#1)Il testo

#2)La parola da censuare

#3)Il carattere con quale censurare

def censura(testo,parola,char):

testo = testo.split()

for i in range(0, len(testo)):

if testo[i] == parola:

testo[i] = char * len(testo)

else:

continue

return " ".join(testo)

print censura("Ma che cavolo !!","cavolo","-")

10/04/201418/10/2016 da Mr Codematrix

Input AutoComplete

Oggi vediamo come mamma google può semplificare la vita di un programmatore Web.
Questo snippet importa jquery e il file css sempre di mamma google per creare un
inputbox autocomplete in modo semplice e pratico da portare sul vostro portarle Web.

Pagina Html

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
    source: [
		"ActionScript",
		"AppleScript",
		"Asp",
		"BASIC",
		"C",
		"C++",
		"Clojure",
		"COBOL",
		"ColdFusion",
		"Erlang",
                "Forth",
		"Fortran",
		"Groovy",
		"Haskell",
		"Java",
		"JavaScript",
		"Lisp",
		"Perl",
		"PHP",
		"Python",
		"Ruby",
		"Scala",
		"Scheme"
	]
});
  });
  </script>
</head>
<body style="font-size:60%;">
	<input id="autocomplete" />
</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("input#autocomplete").autocomplete({

source: [

"ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Forth",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

"Scheme"

]

});

</script>

</head>

</body>

</html>

29/03/201418/10/2016 da Mr Codematrix

Effetto Scroll sul Background

Oggi vediamo come creare una immagine con una trasparenza nel testo che scrollando verso il basso da idea che il background si muova verso il basso.

Pagina Html

<!DOCTYPE html>
<html>
<head>
	<title>Effetto scroll immagine</title>
	<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
	<div id="img_height">
		<div><img src="banner.png"/></div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Effetto scroll immagine</title>

</head>

<body>

</div>

</body>

</html>

Foglio di Stile

/*Imposto Immagine di background che ci sara sotto al nostro banner*/
body
{
	background-image: url('scroll_down.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #000;
}

/*Altezza della immagine di background*/
#img_height
{
	height: 6000px;
}

/*Imposto varie caratteristiche del nostro div*/
div div
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	text-align: center;
}

/*Dimensioni dei bordi delle immagini*/
img
{
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	border-top: 70px solid #000;
	border-bottom: 2000px solid #000;
}

/*Imposto Immagine di background che ci sara sotto al nostro banner*/

body

{

background-image: url('scroll_down.jpg');

background-position: top center;

background-repeat: no-repeat;

background-color: #000;

}

/*Altezza della immagine di background*/

#img_height

{

height: 6000px;

}

/*Imposto varie caratteristiche del nostro div*/

div div

{

position: fixed;

top: 0;

left: 0;

width: 100%;

display: block;

text-align: center;

}

/*Dimensioni dei bordi delle immagini*/

img

{

border-left: 10px solid #000;

border-right: 10px solid #000;

border-top: 70px solid #000;

border-bottom: 2000px solid #000;

}

Da questo link puoi scaricare una versione demo di questo codice.

20/03/201418/10/2016 da Mr Codematrix

Testo con effetto stampato in css

Oggi vediamo come dare al nostro testo un effetto stampato molto utile per creare dei
banner semplice senza usare nessun editor grafico.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>Effetto stampato  sul testo con css senza javascript</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<h1>CODEMATRIX</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Effetto stampato sul testo con css senza javascript</title>

</head>

<body>

<h1>CODEMATRIX</h1>

</body>

</html>

Foglio di Stile

h1 {
	/*Applico un ombra con un colore piu chiaro del testo in modo tale che genere un effetto stampato*/
	text-shadow: 0px 1px 1px #088a38;
	/*Colore testo*/
	color: #205e07;
	/*Tipo di Font e grandezza*/
	font: 80px 'COMIC SANS MS';
	/*Colore background*/
	background: green
	/*Nel caso voglio aggiungere un bel background personalizzato*/
	background-image:url("background.jpg");
}

h1 {

/*Applico un ombra con un colore piu chiaro del testo in modo tale che genere un effetto stampato*/

text-shadow: 0px 1px 1px #088a38;

/*Colore testo*/

color: #205e07;

/*Tipo di Font e grandezza*/

font: 80px 'COMIC SANS MS';

/*Colore background*/

background: green

/*Nel caso voglio aggiungere un bel background personalizzato*/

background-image:url("background.jpg");

}

10/03/201418/10/2016 da Mr Codematrix

Creare una Speech Bubble in Css

Oggi vediamo come creare una Speech Bubble cioè la classica nuvoletta dei fumetti usando solo css.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>Speech Bubble</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<div class="speech_bubbles">Ciao</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Speech Bubble</title>

</head>

<body>

</body>

</html>

Foglio di Stile

.speech_bubbles {
  position: relative;/*Posizione Relativa*/
  padding: 15px;/*Padding*/
  margin: 1em 0 3em;/*Margini*/
  color: #000;/*Colore del Testo*/
  background: #D0D0D0;/*Sfondo*/
  border-radius: 10px;/*Grandezza raggio*/
  background: linear-gradient(top, #A0A0A0 , #D0D0D0);/* Gradienti CSS3 consentono di visualizzare transizioni uniformi tra due o più colori specificati. */
}

/* Creo il triangolo */
.speech_bubbles:after {
  content: "";
  display: block;
  position: absolute;
  bottom: -15px;
  left: 50px;
  width: 0;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #D0D0D0 transparent;
}

.speech_bubbles {

position: relative;/*Posizione Relativa*/

padding: 15px;/*Padding*/

margin: 1em 0 3em;/*Margini*/

color: #000;/*Colore del Testo*/

background: #D0D0D0;/*Sfondo*/

border-radius: 10px;/*Grandezza raggio*/

background: linear-gradient(top, #A0A0A0 , #D0D0D0);/* Gradienti CSS3 consentono di visualizzare transizioni uniformi tra due o più colori specificati. */

}

/* Creo il triangolo */

.speech_bubbles:after {

content: "";

display: block;

position: absolute;

bottom: -15px;

left: 50px;

width: 0;

border-width: 15px 15px 0;

border-style: solid;

border-color: #D0D0D0 transparent;

}

28/02/201418/10/2016 da Mr Codematrix

ToolTip animato con Css

Oggi vediamo come creare un tooltip animato in css senza utilizzare Javascript o Flash.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>ToolTip solo con css senza javascript e flash</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<br><br><br>
	<div align="center">
		<i class="tooltip-block"><b>Test</b><span class="tooltip">Funziono a Bestia</span></i>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ToolTip solo con css senza javascript e flash</title>

</head>

<body>

<i class="tooltip-block"><b>Test</b><span class="tooltip">Funziono a Bestia</span></i>

</div>

</body>

</html>

Foglio di Stile

.tooltip-block {
	/* Forza il tooltip nel elemento relativo non nella pagina */
	position:relative; 
	cursor:help;
}
 
.tooltip {
	display:block;
	position:absolute;/*Posizione assoluta*/
	width:150px;/*Larghezza*/
	padding:5px 15px;/*Padding*/
	left:50%;/*Sinistra 50%*/
	bottom:25px;/**/
	margin-left:-95px;/*Margine a sinistra*/
	/* Tooltip Style */
	color:#fff;/*Colore*/
	border:2px solid rgba(35,35,35,0.9);/*Bordo*/
	background:rgba(50,50,50,0.9);/*Cambia il sfondo della immagine*/ 
	text-align:center;/*Allineamento del testo a destra*/
	border-radius:3px;/*Bordo*/
	opacity:0;/*Opacità*/
	box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);/* Il nostro box shadow */
	/*--------------------------------------------------------------------------------------------------------*/
	/*Effetto transistion del css3 in scale vuol dire che aumenta o diminuisce effetto secondo asse x e asse y*/
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-0-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	/*--------------------------------------------------------------------------------------------------------*/
	/*Imposto il font*/
	font-size:15px;
	font-weight:normal;
	font-style:normal;
}
 /*Posizione margini bordi prima e dopo */
.tooltip:before, .tooltip:after{
	content:"";
	position:absolute;
	bottom:-13px;
	left:50%;
	margin-left:-9px;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
	bottom:-12px;
	margin-left:-10px;
	border-top:10px solid rgba(35,35,35,0.9);
}
/*Genera animazione quando viene messo il puntore su esso*/ 
.tooltip-block:hover .tooltip, a:hover .tooltip {
	/*Setto opacità in modo tale che dia un piccolo effetto di trasparenza*/
	opacity:0.9;
	/*Modifica la scale del transform da 0 a 1 generando la seguente animazione*/
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}

.tooltip-block {

/* Forza il tooltip nel elemento relativo non nella pagina */

position:relative;

cursor:help;

}

.tooltip {

display:block;

position:absolute;/*Posizione assoluta*/

width:150px;/*Larghezza*/

padding:5px 15px;/*Padding*/

left:50%;/*Sinistra 50%*/

bottom:25px;/**/

margin-left:-95px;/*Margine a sinistra*/

/* Tooltip Style */

color:#fff;/*Colore*/

border:2px solid rgba(35,35,35,0.9);/*Bordo*/

background:rgba(50,50,50,0.9);/*Cambia il sfondo della immagine*/

text-align:center;/*Allineamento del testo a destra*/

border-radius:3px;/*Bordo*/

opacity:0;/*Opacità*/

box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);/* Il nostro box shadow */

/*--------------------------------------------------------------------------------------------------------*/

/*Effetto transistion del css3 in scale vuol dire che aumenta o diminuisce effetto secondo asse x e asse y*/

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-0-transition:all 0.2s ease-in-out;

-ms-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

-webkit-transform:scale(0);

-moz-transform:scale(0);

-o-transform:scale(0);

-ms-transform:scale(0);

transform:scale(0);

/*--------------------------------------------------------------------------------------------------------*/

/*Imposto il font*/

font-size:15px;

font-weight:normal;

font-style:normal;

}

/*Posizione margini bordi prima e dopo */

.tooltip:before, .tooltip:after{

content:"";

position:absolute;

bottom:-13px;

left:50%;

margin-left:-9px;

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:10px solid rgba(0,0,0,0.1);

}

.tooltip:after{

bottom:-12px;

margin-left:-10px;

border-top:10px solid rgba(35,35,35,0.9);

}

/*Genera animazione quando viene messo il puntore su esso*/

.tooltip-block:hover .tooltip, a:hover .tooltip {

/*Setto opacità in modo tale che dia un piccolo effetto di trasparenza*/

opacity:0.9;

/*Modifica la scale del transform da 0 a 1 generando la seguente animazione*/

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-ms-transform:scale(1);

transform:scale(1);

}

20/02/201418/10/2016 da Mr Codematrix

Effetto polaroid in css

Gia abbiamo trattato del uso del Shadow Box (visibile qui)ma oggi vedremo come utilizzarlo insieme ad altri caratteristice del css per generare una
foto in stile polaroid.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>Immagine stile polaroid</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<img src="myimg.jpg" class="polaroid"></img>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Immagine stile polaroid</title>

</head>

<body>

</body>

</html>

Foglio di Stile

img.polaroid {  
	background:#000; /*Cambia il sfondo della immagine*/  
	border:solid #fff; /*Imposto il bordo*/
	border-width:5px 5px 20px 5px; /*Imposto il bordo*/
	box-shadow:1px 1px 7px #333;/* Il nostro box shadow */
	-webkit-box-shadow:1px 1px 5px #333;/*Per i browser come Chrome e Safari */
	-moz-box-shadow:1px 1px 5px #333;/* Per Firefox */
	-o-box-shadow: 1px 1px 5px #333; /* Per Opera */	
	height:250px; /*Imposto altezza a 250px*/  
	width:250px; /*Imposto la lunghezza a 250px*/  
}

img.polaroid {

background:#000; /*Cambia il sfondo della immagine*/

border:solid #fff; /*Imposto il bordo*/

border-width:5px 5px 20px 5px; /*Imposto il bordo*/

box-shadow:1px 1px 7px #333;/* Il nostro box shadow */

-webkit-box-shadow:1px 1px 5px #333;/*Per i browser come Chrome e Safari */

-moz-box-shadow:1px 1px 5px #333;/* Per Firefox */

-o-box-shadow: 1px 1px 5px #333; /* Per Opera */

height:250px; /*Imposto altezza a 250px*/

width:250px; /*Imposto la lunghezza a 250px*/

}

Cookie	Durata	Descrizione
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

CodeMatrix Blog

Il sapere umano appartiene al mondo.

Autore: Mr Codematrix

Gestione file in php

Precaricamento delle immagini

Convertire Djvu in pdf

Censurare le parole in Python

Input AutoComplete

Effetto Scroll sul Background

Testo con effetto stampato in css

Creare una Speech Bubble in Css

ToolTip animato con Css

Effetto polaroid in css

Ads Blocker Detected!!!