jquery » Web 3.0 Notes

21

Nov

Background ridimensionabile: jquery o css?

A volte è una soluzione che può fare la differenza: avere il proprio layout disposto su uno sfondo che prende tutta la pagina perfettamente.

Si è scritto tanto finora e si continua a scrivere. Perchè una soluzione ovvia, e anche semplice, cioè una proprietà del background in css, c’è ma non è ancora universalmente funzionante. A supportarla sono finora soltanto gli ultimissimi browser, io l’ ho testata e a dire la verità non mi sembrava funzionasse ancora in maniera perfetta nemmeno laddove il supporto esiste già.

Il css3 introduce infatti due proprietà per il background:

background-size
background-origin

La prima è proprio quella che riguarda le dimensioni, che possono esssere specificate sia in pixel che in percentuale. Ovviamente utilizzando la percentuale il background dovrebbe essere ridimensionato in base alla dimensione dello schermo. Io l’ ho testata ma non mi è sembrato che i rapporti siano perfetti. In ogni caso non è soluzione utilizzabile per lo scarso supporto che hanno finora i css3.

L’ alternativa è Javascript. Di script ne ho testati un pò, fino ad arrivare a quello che ridimensiona in modo perfetto e che è compatibile con tutti i browser testati, da IE7 in poi, per indenderci.

Supersized è sicuramente il migliore. Plugin jQuery che permette di inserire delle slides di immagini oppure di recuperare i nostri sfondi direttamente da Flickr.

Per provare ad utilizzarlo, basta aggiungere tra i tag <head> e </head> qualche riga di codice, il codice include la libreria jQuery hostata su Google, lo script che scaricate dal link sopra e indica il percorso della vostra immagine.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script> <!-- jQuery library da google -->
<!--some css --><script type="text/javascript" src="js/supersized.3.1.3.core.min.js"></script> <!-- the plugin with less code--><script type="text/javascript">// <![CDATA[
 			jQuery(function($){ 				$.supersized({ 					//Immagini di sfondo:  [ { image : 'images/body-bg.png' } ]					 				}); 			});
// ]]></script>

Insomma basta davvero poco!

Fonte: Questo è la traduzione di un mio articolo in inglese su PixyLabs, il mio piccolo studio web nato a Londra. Il sito è ancora in via di definizione, perciò abbiate ancora un pò di pazienza…grazie..

javascript, Web Design

nemoprincess

17

Feb

Angoli arrotondati senza Css

4

swfIR è una semplice ed efficace alternativa per arrotondare gli angoli delle immagini senza utilizzare CSS3. La soluzione swfIR combina jQuery e Flash per fornire una serie di effetti come angoli arrotondati, ombre, bordi e rotazione.

Angoli arrotondati

Utilizzarlo è davvero molto semplice:

Scaricate swfIR
Caricate swfir.js e swfir.swf sul vostro server nella stessa directory
Includete la libreria swfIR nel tag :

<script src="swfir.js" type="text/javascript"></script>

scegliete quale caratteristica applicare a quali immagini:

var borders = new swfir();
borders.specify("border-radius", "15");
borders.swap("#content img");

Ovviamente potete integrare lo script anche in WordPress:

scaricate lo script, uploadate i file e includete la libreria come descritto prima
aggiungete questo codice nel file footer.php prima della chiusura del tag

<script type="”text/javascript”">// <![CDATA[

// swfIR
window.onload = function() {
var sir = new swfir();
sir.specify(“border-radius”, “15″);
sir.specify(“src”, “/swfir/swfir.swf”);
sir.swap(“.latest-posts-center img”);
sir.swap(“.latest-posts-center a img”);
sir.swap(“img.rounded”);
// ]]></script>

Assicuratevi che le immagini non siano organizzate per mese e giorno (Impostazioni->Miscellanea) e aggiungete questo codice da qualche parte nel loop:

ID, ’rounded_img’, true) ) {
$postimg = get_post_meta($post->ID, ’rounded_img’, $single = true);
if((stristr($postimg,’http’)===FALSE) && (stristr($postimg,’wp-content’)===FALSE)) {
$postimg = get_bloginfo(’siteurl’).”/wp-content/uploads/”.$postimg;
} ?>

Quando inserite un’ immagine in un post, copiatene il link dopo l’ upload, create un campo personalizzato chiamato rounded_img e assegnate il link come valore.

I Pro

swfIR è una libreria cross-browser, non avete quindi il problema che ancora si riscontra con CSS3.
se avete bisogno di proteggere le immagini, disabilita il click con il tasto destro

I Contro:

Non è compatibile con Prototype e Mootools
Si perde il tag alt dopo la sostituzione

Qualcuno l’ ha provato? Cosa ne pensate?

Css, javascript, Web Design

nemoprincess

6

Jan

jQuery…ma cos’è?

0

Se siete arrivati fin qui sarà perchè avete spesso letto di jQuery, ma ancora non avete ben chiaro cos’è.
Si parla di jQuery quando si ha a che fare con lo sviluppo di pagine web. In effetti è proprio per “facilitare” la creazione di pagine web che nel 2006 John Resig pubblicò la prima versione dell’ ormai famosissimo framework.
A quei tempi (nel 2006) erano già noti altri tool Javascript che avevano lo stesso scopo, purtroppo però Javascript è un linguaggio di programmazione lato client e strumenti come Prototype e Mootools se da un lato facilitavano le cose, dall’ altro generavano gravi problemi di compatibilità tra i vari browser.
jQuery nasce proprio con lo scopo di risolvere tali problemi e di fornire uno strumento che potesse velocizzare la stesura del codice. Ed è così che è diventato il framework più utilizzato e per questo con più plugin disponibili. La libreria ha una dimensione inferiore a quella degli altri framework; ha una community estesa ed è facile da imparare.
Il motto di jQuery: “Write less, do more“ riassume i motivi che dovrebbero convincere ogni sviluppatore ad utilizzarlo. Con poco codice si riesce a fare davvero tanto. La sinteticità è infatti un altro dei punti a favore.

Dal sito è possibile scaricare la libreria in due formati:

compresso
non compresso

Oppure per cercare di velocizzare il caricamento delle pagine, si può utilizzare la versione messa a disposizione da Google, attenzione però la disponibilità on line non potrà mai essere garantita al 100%!

Se vi è venuta voglia di vedere in pratica come funziona, sempre su jquery.com sono presenti un bel pò di tutorial per iniziare.

Buon lavoro!

javascript

nemoprincess

18

Jul