
Niente di meglio che imparare Javascript giocando con un gioco fantasy. Continua a leggere
Ci sono 14 articoli con tag Tutorial (questa è la pagina 1 di 2).
Ecco a voi di seguito, a qualche settimana dalle tanto agognate festività natalizie, alcune guide e chicche, le più interessanti attualmente circolanti nel web.
Che Natale sarebbe senza atmosfera natalizia a corredarlo? Prendete un desktop, sarebbe noioso avere anche durante le festività natalizie il solito freddo e per nulla accogliente sfondo; Per ovviare al problema Smashing Magazine presenta una galleria di wallpaper con atmosfera natalizia:.
Noupe offre online una guida su come creare con Adobe Illustrator un biglietto d’Auguri, certo richiede qualche conoscenza del noto software di casa Adobe, ma nulla che un buon geek non possa imparare in due o tre giornate “lavorative”:
E gli smanettoni di WordPress, la piattaforma oramai multifunzionale che da qualche anno a questa parte ha monopolizzato il mercato cms? Accontentati da una speciale rubrica, Advent Calendar, di WPengineer. Gli autori spiegano ogni giorno suggerimenti e trucchetti per potenziare ulteriormente il proprio sito basato su wordpress.
In tempi di crisi torna a far parlare di se il DIY (Do It Yourself, l’equivalente del nostro fai da te), e sul ben noto instructables spunta una guida per creare un “Mini LED Christmas Tree”. Una guida manuale stavolta, per tutti i geek che stanchi del pc volessero dedicarsi ad attività più concrete.
Per coloro i quali vogliano invece riciclare una vecchia rivista in maniera intelligente, ecco direttamente da youtube un video che illustra come realizzare da vecchi giornali un albero natalizio in miniatura. Una vera chicca!
Oggi vi segnalo un utile tutorial che vi mostra come “incorniciare” le immagini sulle pagine del vostro sito web. Il risultato è veramente sorprendente.
Oggi con questo articolo stileremo una lista di 10 semplici ed utili esempi dell’ormai nota libreria di Javascript, jQuery. Con queste librerie, realizzare effetti complessi, diventa veramente banale.
Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:
Inserite il seguente codice tra i tag del vostro sito internet.
[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]
Successivamente dovete inserire il seguente codice tra i all’interno dei tag head, tra <script type=”text/javascript”> //il codice qui </script>, oppure realizzate un nuovo file .js incollate il seguente codice ed importatelo con <script src=”funzione.js” type=”text/javascript”></script>
[code]
this.screenshotPreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.screenshot").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’screenshot’><img src=’"+ this.rel +"’ alt=’url preview’ />"+ c +"</p>");
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#screenshot").remove();
});
$("a.screenshot").mousemove(function(e){
$("#screenshot")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 30;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.preview").hover(function(e){
this.t = this.title;
this.title = "";
var c = (this.t != "") ? "
" + this.t : "";
$("body").append("<p id=’preview’><img src=’"+ this.href +"’ alt=’Image preview’ />"+ c +"</p>");
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#preview").remove();
});
$("a.preview").mousemove(function(e){
$("#preview")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
this.tooltip = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup’s distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$("a.tooltip").hover(function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id=’tooltip’>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},
function(){
this.title = this.t;
$("#tooltip").remove();
});
$("a.tooltip").mousemove(function(e){
$("#tooltip")
.css("top",(e.pageY – xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
};
[/code]
Come nello Step 2, importate quest’altra funzione:
[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]
Come nello Step 2, importate quest’altra funzione:
[code]
$(document).ready(function(){
tooltip();//active les tooltip simple
imagePreview();//active les tooltip image preview
screenshotPreview();//active les tooltip lien avec preview
});
[/code]
Adesso i tooltip sono funzionanti, occorre solo inserire il seguente file nel nostro foglio di stile CSS.
[code]
#screenshot{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
#tooltip{
position:absolute;
border:1px solid #333;
background:#f7f5d1;
padding:2px 5px;
color:#333;
display:none;
}
[/code]
Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:
[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]
[code]
<a href="image.jpg" class="preview" 2="2="2="title="Great""" 3="looking" 4="4="4="landscape">Roll""" 5="over" 6="to" 7="preview</a>" 8="[/html" language=">"]
<h5>Immagine con tooltip di anteprima</h5>
<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>
[/code]
Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.
Inserite il seguente codice tra i tag del vostro sito internet.
[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]
Successivamente inserite tra i tag il seguente codice:
[code]
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
[/code]
Diamo un tocco di classe con i CSS (in realtà questi sono essenziali al funzionamento dello script):
[code]
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
[/code]
Infine richiamiamo tutte le funzioni con il seguente codice:
[code]
<ul>
<li>
<a id="a1">
<img src="images/free_thumb.jpg" />
<p>
<strong>Freebies</strong><br/>
Download free files to make your job easier.
</p>
</a>
</li>
<li>
<a>
<img src="images/tut_thumb.jpg" />
<p>
<strong>Tutorials</strong><br/>
Tips and tricks to help you
keep up with the latest technology.
</p>
</a>
</li>
<li>
<a>
<img src="images/inspire_thumb.jpg" />
<p>
<strong>Inspiration</strong><br/>
Get inspired by what other designers are doing.
</p>
</a>
</li>
</ul>
[/code]
Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.
Inserite il seguente codice tra i tag del vostro sito internet.
[code]<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
</script>
[/code]
Successivamente inserite tra i tag la segueente funzione:
[code]
function initMenus() {
$(‘ul.menu ul’).hide();
$.each($(‘ul.menu’), function(){
$(‘#’ + this.id + ‘.expandfirst ul:first’).show();
});
$(‘ul.menu li a’).click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($(‘#’ + parent).hasClass(‘noaccordion’)) {
$(this).next().slideToggle(‘normal’);
return false;
}
if((checkElement.is(‘ul’)) && (checkElement.is(‘:visible’))) {
if($(‘#’ + parent).hasClass(‘collapsible’)) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
}
return false;
}
if((checkElement.is(‘ul’)) && (!checkElement.is(‘:visible’))) {
$(‘#’ + parent + ‘ ul:visible’).slideUp(‘normal’);
checkElement.slideDown(‘normal’);
return false;
}
}
);
}
$(document).ready(function() {initMenus();});
[/code]
Inoltre per rimuovere un bug del buon vecchio IE, utilizziamo i conditional tag:
[code]
<!–[if lt IE 8]>
<style type="text/css">
li a {display:inline-block;}
li a {display:block;}
</style>
<![endif]–>
[/code]
Adesso decoriamo il nostro menu, aggiungendo il seguente codice nel nostro foglio di stile.
[code]
ul.menu, ul.menu ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 15em;
}
ul.menu a {
display: block;
text-decoration: none;
}
ul.menu li {
margin-top: 1px;
}
ul.menu li a {
background: #333;
color: #fff;
padding: 0.5em;
}
ul.menu li a:hover {
background: #000;
}
ul.menu li ul li a {
background: #ccc;
color: #000;
padding-left: 20px;
}
ul.menu li ul li a:hover {
background: #aaa;
border-left: 5px #000 solid;
padding-left: 15px;
}
[/code]
Adesso richiamiamo tutte le funzioni con il seguente codice html:
[code]
<ul id="menu1" class="menu">
<li style="position: static;">
<a href="#">Weblog Tools</a>
<ul style="display: block;">
<li><a href="http://www.pivotx.net/">PivotX</a></li>
<li><a href="http://www.wordpress.org/">WordPress</a></li>
<li><a href="http://www.textpattern.com/">Textpattern</a></li>
<li><a href="http://typosphere.org/">Typo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Programming Languages</a>
<ul style="display: none;">
<li><a href="http://www.php.net/">PHP</a></li>
<li><a href="http://www.ruby-lang.org/en/">Ruby</a></li>
<li><a href="http://www.python.org/">Python</a></li>
<li><a href="http://www.perl.org/">PERL</a></li>
<li><a href="http://java.sun.com/">Java</a></li>
<li><a href="http://en.wikipedia.org/wiki/C_Sharp">C#</a></li>
</ul>
</li>
<li><a href="http://www.i-marco.nl/weblog/">Marco’s blog (no submenu)</a></li>
<li style="position: static;">
<a href="#">Cool Stuff</a>
<ul style="display: none;">
<li><a href="http://www.apple.com/">Apple</a></li>
<li><a href="http://www.nikon.com/">Nikon</a></li>
<li><a href="http://www.xbox.com/en-US/">XBOX360</a></li>
<li><a href="http://www.nintendo.com/">Nintendo</a></li>
</ul>
</li>
<li style="position: static;">
<a href="#">Search Engines</a>
<ul style="display: none;">
<li><a href="http://search.yahoo.com/">Yahoo!</a></li>
<li><a href="http://www.google.com/">Google</a></li>
<li><a href="http://www.ask.com/">Ask.com</a></li>
<li><a href="http://www.live.com/?searchonly=true">Live Search</a></li>
</ul>
</li>
</ul>
[/code]
Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili:
Vista l’elevato numero di richieste, pubblico un piccolo tutorial che illustra i passi da seguire per poter implementare la sezione “Articoli correlati” che trovate sotto ad ogni articolo di Dynamick.
In giro per la rete si trovano molti video che trattano WordPress nei suoi vari e numerosi aspetti. Gli ingegneri che manovrano le sorti di WordPress hanno pensato bene di creare un contenitore dove pubblicare tutti i video su WordPress per creare un unico sito di riferimento.
E’ allora nato WordPress.tv, un YouTube dei blog, che mostra agli utenti lo stato dell’arte di WordPress tramite filmati. Questo sito ha l’ambizione di sollevare l’utente dal leggere lunghi tutorial e di semplificargli la vita tramite how-to video, molto più leggeri e semplici da comprendere. Inoltre ci sono riprese tratte dai WordCamp, ovvero convegni il cui tema è WordPress, tenuti in giro per il mondo.
WordPress TV è ben fatto, chiaro e semplice. I video sono anche disponibili in alta qualità e si possono includere nelle pagine dei propri siti, come con Youtube. Un sito da visitare…
Molti di voi, avranno sentito parlare di Apple e del suo ultimo Sistema Operativo Leopard, (Mac Osx 10.5). Questo S.O. è veramente eccezionale, ma il poterlo utilizzare, implica l’acquisto di un "Mac", (i computer prodotti da Apple), caratterizzati da un costo non indifferente.
Nella seguente lista, troverete, divisi per tipologia, alcune ottime guide, utili all’installazione di Leopard su pc. Buona lettura!
Per problemi, dubbi o magari consigli, non esitate a lasciare un commento, vedrò di rispondervi al più presto.
Sapevate tutti come fare a cambiare le Vostre icone Mac con delle altre icone o addirittura con delle immagini? Sia che si tratti di file, cartelle o di periferiche esterne. Come fare? è semplicissimo! Basta seguire i seguenti passi:
Nel caso in cui aveste un ripensamento e voleste annullare il cambiamento basterà digitare mela + x
Nel caso in cui si volesse sfruttare un’immagine qualsiasi come icona è sufficiente seguire i seguenti passi:
vasto assortimento di icone su:
Molti di voi spesso si chiedono come riuscire a scariare i video di YouTube, di Google Video o di MySpace per poterli poi masterizzare su DVD e vederli sulla Tv. Bene, ecco un semplice tutorial che vi mostra proprio come salvare sul vostro pc i video che trovate in rete. Prima di cominciare, vi avverto che i video saranno di bassa qualità, esattamente come li vedete andando su YouTube. Quindi la risoluzione sarà di 320×240 che è molto più bassa rispetto a un filmato in qualità DVD che presenta una risoluzione di 720×576.
Ecco la semplice procedura, in due passi:
Ora potete spegnere il pc e andarvi a gustare i simpatici video di YouTube comodamente sdraiati sul divano di casa vostra.
Per chi è alla ricerca di imparare i segreti dell’arte fotografica, ecco una bella lista di 53 tecniche fotografiche, spiegate per filo e per segno. Questi tutorial sono frutto dell’esperienza di un fotografo che ad un certo momento della sua carriera ha deciso di condividere le sue conoscenze, in perfetta sintonia con lo spirito di internet.
Foto da: http://dg28.wordpress.com/page/2/