CSS Jquery Ajax Javascript – Tutorials e risorse
Ecco un video player in HTML 5 che legge da un file XML esterno.
E’ facile da configurare, basta agire sul file XML per aggiungere o togliere video dalla lista.
Per ogni item nel file XML si possono aggiungere un titolo, una descrizione ed i percorsi dei files video ( formati mp4 e ogg ).
Inoltre, nel file XML possiamo configurare le dimensioni del video.
Continua a leggere…
{ 0 comments }
Ho creato un video player utilizzando l’iframe che mette a disposizione YouTube con la classe youtube-player.
Questo video player è in HTML 5 e Javascript ( jQuery ). Carica gli standard feeds da YouTube e visualizza una lista dei video in base ad alcuni criteri: Most Viewed, Top Rated, Recently Featured, Most Discussed, Top Favorites, Most Responded e Most Recent.
Molto utile per imparare a lavorare con Javascript, HTML 5 e il player video di YouTube.
Continua a leggere…
{ 0 comments }
Ecco un lettore RSS mobile che carica dei feeds in tempo reale.
Tecnologie usate: JQuery Mobile, Jquery, JFeed, HTML5 e PHP.
Continua a leggere…
{ 1 comment }
In questo esempio vediamo come impostare una immagine di sfondo al 100% con JQuery
Vedremo come fare in modo che l’immagine di sfondo venga ridimensionata adeguatamente al ridimensionamento della finestra del browser.
Inoltre questo script permette di non alterare le dimensioni dell’immagine durante il ridimensionamento e quindi fare in modo che l’immagine non venga distorta.
Funziona sia per immagini orizzontali che verticali.
E’ uno script che usavo speso con Flash ed Actionscript ed ho deciso di convertirlo anche per Javascript e JQuery.
Ecco il tutorial di questo esempio.
Continua a leggere…
{ 0 comments }
Ho creato una semplice lista selezionabile con JQuery.
Ogni elemento selezionato viene distinto per un’animazione del colore di sfondo e del colore di testo.
Per gestire le transizioni di colore, ho usato il plugin JQuery color.
Vediamo il codice utilizzato.
Continua a leggere…
{ 0 comments }
Questa è la prima parte di una serie di tutorial che riguarda le API Javascript di Google Maps.
In questo caso vediamo come visualizzare una Google map con Javascript.
Come centrare tale mappa in base ad un indirizzo.
Il mio esempio è gestito da un file XML che contiene alcuni indirizzi. Questo file viene caricato con JQuery Ajax per popolare una lista select ( o combobox ).
In base alla selezione dell’utente dalla lista, la mappa verrà aggiornata in tempo reale.
Questi sono i primi passi per la tecnica di geocoding con le Google Maps.
Ecco i passi che spiegano come fare:
{ 0 comments }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
<title>JQuery and XML Combobox</title>
</head>
<body onLoad="loadXML()">
<div id="holder">
<form name"myForm" method="GET" action="">
<select name="myList" onclick="go(this.form)" id="combobox">
</select>
</form>
</div>
</body>
</html>
{ 0 comments }
Ho creato uno scroller orizzontale che visualizza gli utlim tweets di un account Twitter.
I tweets vengono caricati chiamando le API di Twitter.
Le tecnologie usate sono Jquery, html e CSS. Inoltre un file PHP esegue la chiamata al feed di Twitter ( causa problemi di permessi ).
Abbiamo una chiamata da onLoad del body verso una funzione Javascript chiamata loadTweets che risiede nel file last_tweets.js.
Nel body abbiamo un DIV per il titolo del widget, un DIV per il contatore. Due DIV contenitori ( servono per il metodo animate() di Jquery ) e l’ultimo DIV contenitore che racchiuderà i tweets.
Continua a leggere…
{ 0 comments }
Ho creato una semplice galleria immagini con HTML, Jquery e Ajax.
Questa galleria è gestita semplicemente da un file XML ( images.xml ).
Dato che vengo dal mondo Flash/Actionscript sono abituato a gestire i contenuti delle applicazioni da un file XML esterno.
Cosa ne pensate ?
Di seguito elenco i passi principali per costruire tale galleria.
Continua a leggere…
{ 0 comments }
Eravamo abituati a vedere transizioni a bottoni o elementi web applicate solo utilizzando Flash o Javascript.
CSS3 implementa alcune comode e utili transizioni per arricchire alcuni eventi nei nostri disegni.
Il W3C Spiega le transizioni CSS molto semplicemente :
Le transizioni CSS permettono le modifiche alle proprietà CSS nei valori che si verificano uniformemente nel corso di un periodo di tempo specificato.
Queste transizioni animano la modifica di un valore CSS al clic del mouse, mouseover, ecc ecc…
Iniziamo con un esempio semplice, dove potremo aggiungere una transizione per lo swap del colore di sfondo di un link.
Quando andremo col mouse sul link, il colore di sfondo del link cambierà, e noi useremo una transizione.
Continua a leggere…
{ 0 comments }
Quest’anno, per presentare miei auguri natalizi, ho deciso di creare per divertimento questa cartolina puramente in css.
{ 3 comments }
Revisione del primo esempio di css menu orizzontale dropdown.
Questa nuova versione, altro avere un sub livello extra, si adatta in larghezza al suo contenuto testo e i link rimangono selezionati man mano che si scende di livello.
{ 6 comments }
Per creare un effetto ombreggiatura ai testi in css, è stato introdotto nella stesura del modulo CSS3 Testo, la proprietà text-shadow (ombreggiatura del testo). Purtroppo, al momento questa proprietà css3, non fa parte delle specifiche css e non è supportata da tutti i browser (vedi le prove della proprietà css3 text-shadow).
Nel frattempo, vediamo come ricreare lo stesso effetto usando solo le regole del css2. Prima con un contenuto del testo duplicato, poi creando invece dinamicamente il contenuto testo del ombreggiatura con il pseudo elemento :before
{ 4 comments }
Dopo l’esempio del css news accordion in senso verticale, ecco un nuovo esempio di accordion nel senso orizzontale.
Questo esempio css, visualizza un elemento div in apertura e una serie di link che si aprono sullo stato hover orizzontalmente tipo slide. Ogni, link contiene più elementi ‘inline’:
{ 12 comments }
Il collasso dei margini (in inglese: margin collapse) fa parte delle specifiche per il box model e l’uso dei margini verticali. Spesso questo ‘fenomeno’ è ignorato, visto l’uso di altre proprietà che evitano il collasso, mentre ogni tanto, possono dare un risultato sconcertante che potrebbe essere considerato come un errore d’interpretazione.
Il collasso dei margini succede quando margini verticali (margin-top e margin-bottom) adiacenti, senza nessuna separazione tra di loro, di 2 o più elementi di blocco (adiacenti o innestati) si combinano per formare un unico margine.
Importante: il collasso dei margini non succede mai con elementi in linea o per i margini orizzontali (margin-left e margin-right).
{ 4 comments }
