Creare un’App “News Reader” con Cordova, AngularJs e Twitter Bootstrap

magapp

In questo periodo mi sto dilettando con la creazione di App per mobile, dopo aver scoperto Cordova (alias PhoneGap), un fantastico framework che consente di sviluppare un’App multipiattaforma (iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada e Symbian) utilizzando tecnologie web. Continua la lettura

3 Semplici ed utili tutorial per jQuery


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.

1. Tooltip con jQuery

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale:

  1. Semplice tooltip
  2. Testo con anteprima immagine
  3. Thumbnail con anteprima ingrandita

Step 1

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]

Step 2

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]

Step 3

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]

Step 3

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]

Step 4

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]

Step 5

Siamo giunti al termine del nostri piccolo tutorial. Adesso dobbiamo solo richiamare il tutto nei seguenti modi:

Classico tooltip con testo

[code]
<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>
[/code]

Testo con anteprima immagine

[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]

Source


2. Horizontal Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

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]

Step 2

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]

Step 3

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]

Step 4

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]

3. Menu Accordion

Demo

Prima di iniziare con il nostro tutorial, ti invito a visualizzare una demo dell’effetto finale.

Step 1

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]

Step 2

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]

Step 3

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]

Step 4

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]

Step 5

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]

Nota bene

Modificando la classe, potremo ottenere degli effetti differenti. Di seguito le classi disponibili:

  1. menu
  2. menu expandfirst
  3. menu noaccordion
  4. menu collapsible expandfirst

Source

Calendario 2009 da scaricare: ecco il meglio della rete

Calendari 2009

Se siete stanchi dei soliti calendari (Pirelli, Sara Varone, Linda Santaguida, ecc…) e volete farvelo in casa, ecco tutti i migliori calendario 2009 presenti sulla rete, gratis e da scaricare.

Calendario con foto (gratis)

Calendario con foto

Il Calendario Free e’ personalizzato con la foto che preferite e con la possibilita’ di aggiungere del testo personalizzato. E’ sufficiente compilare il modulo on line e riceverai il calendario finito via email come PDF , in modo che facilmente potrai stamparlo nel formato che preferisci A4 o A3.

Puoi anche mandare il calendario con foto FREE a un tuo amico o parente.

XLCalendar

Calendario 2009: un generatore per excel di calendari

XLCalendar è un generatore di calendari per excel. Prodotto dalla LJZSoft, il programma si installa in pochissimi secondi e genera dinamicamente il calendario dell’anno prescelto. La lingua di default è l’inglese, ma i nomi dei mesi si possono personalizzare nella propria lingua. Esistono vari template che impaginano il calendario in vari formati, tutto l’anno su una stessa pagina, un mese per pagina, con o senza note laterali, ecc… Il download è gratuito.

Calendario 2009 vettoriale

Calendario 2009 in formato vettoriale

Per chi è alla ricerca di un calendario verticale eccovene uno in formato vettoriale, creato appositamente per chi se lo vuole stampare in casa. Si carica in Adobe Illustrator ed è veramente di ottima qualità. Oltre alle festività in colore rosso, ha l’elenco dei santi e le fasi lunari. E’ un insieme di 12 file, uno per ogni mese e sono zippati dal peso totale di 12 Mb. I numeri, i giorni e i santi sono scritti con il font Myriad Pro. L’autore di questo splendido lavoro è PeppeCau.

Calendario 2009 Tascabile (formato biglietto da visita)

Calendario 2009 in formato tascabile, cartolina

Questo calendario è in formato tascabile, ovvero dalle dimensioni ridotte: solo 8.5×5.5 centimetri, ideale per il retro del vostro biglietto da visita. Autore del file è sempre PeppeCau che mette a disposizione il calendario in diversi formati:

Calendario compatto 2009

Calendario Compatto 2009

Come ogni anno, viene rivisto e aggiornato il calendario compatto, idea originale di David Seah. La versione 2009 del Calendario Compatto completamente in italiano, sia in versione Excel, sia in versione PDF presenta anche i numeri delle settimane. La versione che segnalo è stata tradotta e pubblicata da MagnificaWeb. Ecco le due versioni

I 27 trucchi per WordPress più usati nella rete

Questo articolo è rivolto a tutti coloro che possiedono un blog e vogliono estenderlo con nuove funzionalità. Spesso capita di vedere su siti di altri blogger widget e "diavolerie" che ci farebbero comodo. Magari basterebbe conoscere il nome dei plugin per poterli installare anche sul nostro bel blog. Nel seguente articolo segnalo i 27 trucchi e plugin più usati nei blog di tutta la rete (basati su WordPress).

trucchi per wordpress

  1. Menu in stile Apple

    Con questo plugin sarà possibile installare un menu laterale in stile Apple.

  2. Aggiunta di Tabs alla Sidebar

    Crea un box con tab nella sidebar grazie alla  Yahoo! UI Library

  3. Sidebar con contenuto dinamico

    Gli utenti che visitano i blog hanno comportamenti differenti ma spesso capita che ignorino le sidebar perchè ritenute ripetitive. E’ sufficiente mettere del contenuto inerente all’argomento dell’articolo per alzare l’attenzione a questa zona del vostro sito.

  4. Permettere agli utenti di scrivere articoli

    Questo plugin ti permette di aggiungere moduli altamente personalizzabili che consentono gli utenti non registrati di proporre il loro articolo.

  5. Commenti paginati

    Ti permette di dividere i commenti su più pagine, ottimizzate per i motori di ricerca.

  6. Didascalia delle immagini

    Estrae il title o l’ alt dalle immagini all’interno del vostro articolo e genera una didascalia posizionata giusto sotto all’immagine stessa. Supporta la personalizzazione dello stile tramite CSS.

  7. Redirect casuale

    Abilita un link del tipo yourblog.example.com/?random che redirigerà chi vorrete a un post casuale.

  8. Google Syntax Highlighter per WordPress

    Integra facilmente il Google Syntax Highlighter di Alex Gorbatchev all’interno di WordPress. Ecco il risultato:

  9. Facelift Image Replacement (FLIR) per WordPress

    FLIR ti permette di convertire i titoli in immagini generate al volo senza preoccuparsi di perdere l’indicizzazione dei motori di ricerca.

  10. del.icio.us per WordPress

    del.icio.us per WordPress mostra i tuoi ultimi segnalibri salvati tramite del.icio.us

  11. Escludere alcune categorie dalla lista

    Due modi per nascondere alcune categorie sono le seguenti. Puoi inserire questo codice all’interno di the loop

    <?php 

    if ( have_posts() ) : query_posts($query_string .‘&cat=-1,-2′); while ( have_posts() ) : the_post(); 

    ?> 

    o usare il plugin Advanced Category Excluder.

  12. La data in formato Calendario

    Crea un piccolo calendario per visualizzare la data dell’articolo.

  13. Personalizzare ogni singolo articolo

    E’ possibile personalizzare ogni singolo articolo usando la funzione the_ID.

  14. Come evitare articoli duplicati

    Il contenuto dupplicato non è considerato bene dai motori di ricerca. Ecco come evitarlo.

  15. Bottone Delicious

    Aggiungi questo tipo di bottoni che incoraggiano gli utenti a salvare il tuo sito nei loro bookmark

  16. Bottone StumbleUpon

    Aggiungi il bottone Stumble It! per agevolare il visitatore a sottomettere il tuo articolo a StumbleUpon.

  17. Selezionare la voce di menu attiva

    Questo trucco ti permette di selezionare e stilare nel modo più appropriato la voce di menu attualmente attiva aggiungendo semplicemente l’attributo class="current".

    <ul id="nav">
    <li<?php if ( is_home() || is_category() || is_archive() || is_search() || is_single() || is_date() ) { echo ‘ class="current"’; } ?>><a href="#">Gallery</a></li>   <li<?php if ( is_page(‘about’) ) { echo ‘ class="current"’; } ?>><a href="#">About</a></li>   <li<?php if ( is_page(‘submit’) ) { echo ‘ class="current"’; } ?>><a href="#">Submit</a></li>
    </ul>      

    Line 2:

    Se la Home, o la categoria o l’archivio o la pagina di ricerca o una particolare pagina è selezionata, allora l’attributo class="current" sarà incluso nel <li>

    Line 3,4:

    Se la pagina intitolata about o submit è selezionata, viene aggiunto class="current".

    Se stai cercando di aggiungere le categorie nel tuo menu, ecco come fare:
    <ul id=
    "nav">
    <li<?php if ( is_category(‘css’) ) { echo ‘ class="current"’; } ?>><a href="#">CSS</a></li>   <li<?php if ( is_category(showcase) ) { echo ‘ class="current"’; } ?>><a href="#">Showcase</a></li>
    </ul>  

    Line 2,3

    Se la categoria intitolata css o showcase, allora sarà aggiunta la classe class="current".

  18. Bottoni Reddit

    Come i precedenti bottoni, metti il bottone di Reddit per promuovere il tuo blog

    <script type=‘text/javascript’>reddit_url=‘[URL]’</script><script type=‘text/javascript’>reddit_title=‘[TITLE]’</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=1"></script>  

    <script type=‘text/javascript’>reddit_url=‘[URL]’</script><script type=‘text/javascript’>reddit_title=‘[TITLE]’</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=2"></script>  

    <script type=‘text/javascript’>reddit_url=‘[URL]’</script><script type=‘text/javascript’>reddit_title=‘[TITLE]’</script><script type="text/javascript" src="http://www.reddit.com/button.js?t=3"></script>  

    Source.

  19. Archivi che funzionano

    Noura di Noupe.com mostra molti modi per stilare gli archivi di blog basati su WordPress. Queste tecniche e linee guida includono:

    • Elencare tutti i post
    • Mostare gli archivi annuali e mensili
    • Gli archivi ordinati per categoria

    Leggi l’articolo.

  20. Aggiungere le briciole di pane

    Le briciole di pane sono un buon metodo per aggiungere un sistema di navigazione supplementare e aiuta l’usabilità dell’intero sito. Questo plugin attiva la possibilità di aggiungerle.

  21. Landing Page

    Quando un visitatore arriva al vostro sito tramite i motori di ricerca, significa che stanno cercando qualcosa di particolare. La prima cosa che fanno è controllare velocemente se sono capitati nel sito giusto e possono cambiare facilmente indirizzo se ritengono che il sito non sia quello giusto. Perchè non mostrar loro, in testa all’articolo, gli articoli più attinenti alla loro ricerca?

  22. Controllo di eventuali Exploit su WordPress

    Questo plugin di WordPress cerca su tutti i file del tuo blog alla ricerca di eventuali stringhe usate da hacker e mostra i file incriminati. Inoltre cerca nel database alla ricerca di plugin sospetti, commenti o articoli pericolosi.

  23. Pagami una birra

    Consente ai tuoi lettori di "pagarti una birra" via paypal. Nulla di speciale, ma potrebbe tornare utile.

  24. Mostra gli iscritti al tuo feedburner in modalità testuale

    Ecco come mostrare gli iscritti al feed di Feedburner in modalità testuale al posto di usare i widget forniti dal sito.

  25. Notifixious – Segnalare gli utenti via IM

    Questo plugin notifica i tuoi lettori tramite Instant Messaging (AIM, MSN, GTalk, ICQ…), Email o SMS quando tu pubblichi un nuovo articolo.

  26. Installare Xampp e WordPress

    Ecco una guida per installare Xampp (apache, php e mysql) e far funzionare localmente sul tuo pc WordPress.

  27. Creare una ricerca con auto completamento Ajax

    Perchè non aiutare i tuoi visitatori a trovare quello che stanno cercando usando un campo di ricerca con autocompletamento?

    (via hongkiat)