Categoria ‘Tutorials’


Unobtrusive Simple TabStrip

USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all’interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell’aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d’azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.

Codice HTML

La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (<a name></a>):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- Semplice lista di link all'interno della pagina -->
<ul>
    <li><a href="#tbs1">Link 1</a></li>
    <li><a href="#tbs2">Link 2</a></li>
    <li><a href="#tbs3">Link 3</a></li>
</ul>

<!-- Blocchi/tabs -->

<a name="tbs1"></a>
    <div>
        <h1>Scheda #1</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs2"></a>
    <div>
        <h1>Scheda #2</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs3"></a>
    <div>
        <h1>Scheda #3</h1>
        <p>Bla bla bla....</p>
    </div>

Il tag div subito sotto l’anchor a funziona da contenitore.

Continua...

Actionscript 3.0 for beginners: lesson #1

Premessa

Actionscript 3.0 può rappresentare un buon punto di partenza per impratichirsi, chi non è pratico di programmazione C e/o C++, di programmazione orioentata agli oggetti (OOP). Inoltre, questa serie di lezioni, saranno utili a chi proviene da altri ambienti o da precedenti versioni di Flash.

Impostare un progetto

In questa prima lezione vedremo come impostare un progetto Flash CS3 generico. È bene utilizzare i progetti quando si prevede di avere a che fare con almeno più di un file. L’uso dei progetti è stato introdotto – da Macromedia – già nelle versioni  precedenti alla CS3, quindi dovrebbere essere argomento noto anche a sviluppatori Actionscript 2.0.
Comunque sia con Actionscript 3.0 – come vedremo – è possibile associare un file Actionscript (.as) al documento-filmato principale, il nostro .fla per intenderci. Questa caratteristica è molto utile e rende un progetto anche minimale composto da almeno due file: il .fla e .as associato. Per questo motivo è bene “sempre” partire da un progetto, così da organizzare sin da subito i vari file (.fla, .as, …) che faranno parte del nostro “pacchetto” di sviluppo.
Inoltre, una volta acquisita la dimesticazza con la filosofia ad oggetti, instrinseca in questo tipo di linguaggio, sarà normale ritrovarsi con numerosi file, anche per progetti sostanzialmente semplici.

Continua...

Usare i Template WordPress per creare una Sitemap

Esiste una funzionalità in WordPress, a volte trascurata, che lo rende davvero molto versatile, soprattutto per chi crea temi: l’uso dei Template! Un Template non è altro che un file inserito nella cartella del tema. Per identificarlo come Template basta inserire all’inizio del file un particolare commento in PHP:

1
2
3
/*
Template Name: Sitemap
*/

Sfruttando questa caratteristica è possibile creare una pagina vuota, con il procedimento standard di WordPress, e collegarla al nostro template. Se create un file, ad esempio sitemap.php (aggiungendo quel commento indicato più sopra) e lo caricate all’interno della cartella del vostro tema, noterete che nell’editor WordPress durante la creazione di una pagina (non di un post) il menu Template (in basso) conterrà il nome del file template caricato. Come indicato nella sezione template:

Alcuni temi hanno dei template personalizzati da poter utilizzare per determinate pagine, che possono contenere funzionalità aggiuntive o una grafica personalizzata. [...]

Io, ad esempio, ho sfruttato questa caratteristica per creare una pagina dinamica (che esegue quindi codice PHP) in grado di mostrare una vera e propria sitemap del blog.

Creazione di una pagina Sitemap

Prima di tutto create una file sitemap.php e caricatelo all’interno della cartella del vostro tema. Dall’amministrazione di WordPress create una nuova pagina, dategli un nome e selezionate il Template dal menu che si trova sotto l’editor! Finito!

Il template, facendo parte del tema, contiene anche tutta la struttura del tema stesso ed è quindi importante saperlo scrive in modo corretto. Tuttavia ecco uno scheletro di una sitemap che potete modificare in base al tema che avete installato:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<?php
/*
Template Name: Sitemap
*/
?>
<?php get_header(); ?>
  <div id="content">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><?php the_title(); ?></h2>
    <small class="date-time"><?php the_time('l j F, Y') ?></small>
      <div class="entry">  
        <p><strong><a href="<?php bloginfo('url'); ?>" alt="<?php bloginfo('name'); ?>">Home</a></strong></p>
        <h3>Pagine</h3>
        <ul>
          <?php wp_list_pages('title_li='); ?>
        </ul>
        <h3>Post</h3>
        <ul>
          <?php $archive_query = new WP_Query('showposts=1000');
            while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
          <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></li>
          <?php endwhile; ?>
        </ul>
        <h3>Archivi mensili</h3>
        <ul>
          <?php wp_get_archives('type=monthly'); ?>
        </ul>
        <h3>Categorie</h3>
        <ul>
          <?php wp_list_categories('title_li=0'); ?>
        </ul>
        <h3>Feeds RSS/FeedBurner</h3>
        <ul>
          <li><a href="<?php bloginfo('rdf_url'); ?>" alt="RDF/RSS 1.0 feed"><acronym title="Resource Description Framework">RDF</acronym>/<acronym title="Really Simple Syndication">RSS</acronym> 1.0 feed</a></li>
          <li><a href="<?php bloginfo('rss_url'); ?>" alt="RSS 0.92 feed"><acronym title="Really Simple Syndication">RSS</acronym> 0.92 feed</a></li>
          <li><a href="<?php bloginfo('rss2_url'); ?>" alt="RSS 2.0 feed"><acronym title="Really Simple Syndication">RSS</acronym> 2.0 feed</a></li>
          <li><a href="<?php bloginfo('atom_url'); ?>" alt="Atom feed">Atom feed</a></li>
        </ul>
      </div>
    </div>
  <?php endwhile; endif; ?>
  </div>
  <?php get_sidebar(); get_footer(); ?>

Continua...

Photoshop tutorial: tecniche di riflessione

Da Apple al Web 2.0 le immagini “riflesse” hanno inondato Intrenet. Spesso abusate sono tuttavia sempre di grande effetto. Saperle realizzare bene non è impresa complicata e, con un pizzoco di fantasia, si possono rendere meno “ovvie” e “scontate”… se proprio non ne potete fare a meno.

Le basi del Reflex

Prima di tutto vediamo come impostare una riflessione base. La tecnica per impostare una riflessione base, almeno quella che preferisco e che uso continuamente, è di semplice e rapida implementazione. Questo metodo permette la massima libertà di modifiche successive e mantiene la trasparenza nel caso vogliate salvare l’immagine in PNG 24 con trasparenza.

Loading Flash Player...

1. Come sempre apriamo Phosotoshop e carichiamo l’immagine che vogliamo riflettere su un layer apposito
2. Duplichiamo il nostro layer (trascinate il layer da duplicare sull’icona image ) e nominiamolo “shadow” o “reflex”
3. Dal menu “Modifica” selezionate “Trasforma” / “Rifletti verticale”
4. Trascinate il nuovo layer “reflex” sotto al layer originale e spostiamolo alla base del layer originale
5. Selezioniamo il layer “reflex” e, tenendo premuto il tasto ALT, aggiungiamo una maschera cliccando sull’icona image “mask” nella tool window dei layer; il layer “reflex” dovrebbe sparire
6. Selezioniamo la maschera nel layer “reflex” e cliccate sull’icona image di riempimento
7. Impostiamo una sfumatura da nero o bianco a trasparente: image
8. Tracciamo la sfumatura dal centro del layer originale al centro del layer “reflex”

Continua...

Tecniche di Text Replacement in Flash

La tecnica di Text Replacement che presento oggi è, per certi aspetti, davvero interessante. A differenza della classica sostituizione per immagine tramite CSS, questa tecnica usa un filmato Flash per sovrascrivere i titoli del nostro sito. Nonostante sia un pochino più articolata, in quanto richiede la creazione di un filmato Flash e l’uso di Javascript, permette di ottenere una serie di vantaggi non indifferenti:

  • Mantiene l’accessibilità del sito sfruttando un True-Unobtrusive-Javascript in modo che crawler e spider continuino a vedere la pagina come semplice e corretto HTML
  • Non richiede la creazione di n immagini per n titoli. Basta un solo filmato per sostituire tutti i titoli del nostro sito, con un notevole risparmio in termini di Download
  • Permette di creare anche titoli semplici ma con Font normalmente non utilizzati sul Web
  • Il testo può essere reso in HTML, grazie alle caratteristiche di Flash
  • Il testo è selezionabile
  • Essendo un filmato Flash si può inserire interattività e animazioni di qualsiasi sorta

Noterete, anche, che in questa procedura i CSS non sono praticamente presi in considerazione!

Continua...

Tecniche di Text Replacement in HTML/CSS

Il modo corretto di inserire titoli in grafica in una pagina Web è quello per sostituizione tramite i fogli di stile (vedi Progressive Enhancement in Accessibilità e Usabilità: unobtrusive Javascript). Questa tecnica permette di rendere accessibile il contenuto del sito a prescindere dalla visualizzazione grafica imposta dai fogli di stili. Inoltre, crawler e spider, avranno una lettura corretta dell’HTML ignorando la sostituzione grafica offerta all’utente finale. Inserire direttamente un’immagine (TAG img), infatti, rende il testo del titolo inaccessibili ai normali lettori ASCII (crawler, spider, blog plugin, screen-reader, etc…).

Continua...

OnAir: scegli il video con il nuovo on-demand

Su OnAir di Undolog è adesso possibile utilizzare la funzione on-demand messa a disposizine dal player di Mogulus.

Segnala video

Se avete video da segnalare contattatemi, sarò felice – se possibile – di inserirli nel palinsesto di Undolog/OnAir

Continua...

PicLens in Flash con Papervision3D 2.0: parte II

Questa volta (vedi Piclens in Flash con Papervision3D 2.0) pubblico il codice (PicLens.as), ho dovuto rivedere alcune parti di codice, allineandomi così agli ultimi rilasci di Papervision3D 2.0 Great White ed ho eseguito alcuni aggiustamenti e aggiunte.

Continua...

Creare un preloader generico in Actionscript 3.0

Potrebbe sembrare un argomento scontato e ormai esaurito, eppure con Flash CS3 e la nuova gestione della classi documento (package) permesse con Actionscript 3.0, non è del tutto immediato creare un preloader funzionante. L’ultima release di Flash, infatti, gestisce il caricamento del filmato in modo diverso dalle precedenti versioni. In rete potrete trovare diverse proposte e soluzioni per ricreare un preloader “vecchio stampo”. Tuttavia i vari esempi che ho trovato non mi soddisfano pienamente in quanto richiedono di alterare il filmato in modo da farlo funzionare come un preloader classico. In pratica quando si sviluppa bisogna sempre rammentare “questa cosa la devo fare così altrimenti il preload non funziona”! E per i filmati già compilati, poi?

Loader

La soluzione che ho adottato, almeno per adesso, è stata quella di creare un filmato esterno (il mio loader – vedi esempio) in grado di caricare qualsiasi altro filmato esterno, compresa un’immagine! Questa soluzione, nonostante richieda in pratica due filmati (il loader e il filamato vero e proprio), diventa economica solo se si riesce a creare un loader in grado di essere usato più e più volte; cioè in grado di caricare qualsiasi filmato, a qualsiasi risoluzione e a qualsiasi framerate.

Continua...

Reflex e ReflexMe: da Classe base a Classe

Nel post Flash CS3: creare un effetto Reflex su qualsiasi MovieClip avevamo visto com’è possibile scrivere una classe, che estende un MovieClip, per collegarla a DesignTime ad un qualsiasi MovieClip in libreria. Ho scoperto, tuttavia, che può risultare più utile ed economico fare il percorso contrario. Ho creato una classe Reflex (Reflex.as), con l’intenzione di usarla esclusivamente da codice. Ho creato questa classe pensando di passare nel costruttore il puntatore ad un MovieClip. La nuova classe Reflex contiene in sostanza lo stesso codice prima inserito nella ReflexMe, ma leggermente modificato in modo da poter funzionare espressamente da codice:

1
2
3
4
//
import undolibrary.sfx.*;
//
var rx:Reflex = new Reflex( movieClipInstance );

Continua...



Stop SOPA