Actionscript 3.0 for beginners: lesson #2

Mercoledì 3 Settembre, 2008

Come promesso ecco la seconda lezione su ActionScript 3.0! Oggi inizieremo l'analisi di un semplice progetto che riproduce il giochino del Tris o Tic Tac Toe. Ho cercato di inserire in questo esempio alcune caratteristiche particolari di ActionScript 3.0, cercando di dare spazio alla comprensione e non allo stile. Ne segue che se avessi dovuto scrivere il "gioco" davvero, probabilmente l'avrei strutturato in modo assai diverso, ma in questo caso ho cercato di mediare tra una classica programmazione compatta ed ermetica con una maggiormente comprensibile per i neofiti. Ho realizzato un'unica classe documento, procedura non necessaria ma utile per rimanere in linea con la precedente lezione.

Tic Tac Toe

Loading Flash Player...

Continua a leggere... »

jQuery restyling

Domenica 31 Agosto, 2008

Proprio in questi giorni (sotto consiglio...) stavo dando un'occhiata a jQuery, un'ottima libreria sullo stile di prototype.js, scriptaculous.js, mooTools, per intenderci... ed ecco che oggi tutto il sito è stato completamente ridisegnato:

image

Ottimo inizio per allargare i miei orizzonti su questo tipo di librerie! Prossimamente pubblicherò qualche articolo interessante, soprattutto sulle differenze tra jQuery e le altre librerie "simili".

Very short snippet: inviare email in HTML con PHP

Mercoledì 27 Agosto, 2008

Il codice necessario e sufficiente per inviare una semplice email in formati HTML, tramite il comando mail() di PHP è:

PHP:
  1. // preparo l'header per indicare il formato HTML
  2. $headers = "MIME-Version: 1.0\n".
  3.     "Content-type: text/html; charset=utf-8\n".
  4.     "From: Undolog.com <info@undolog.com>\n".
  5.     "Bcc: Copia <g.fazioli@undolog.com>\n";
  6.  
  7. mail( "Destinatario <info@e-lementi.com>", "Oggetto della mail", "<p>Corpo della mail in <strong>HTML</strong></p>", $headers );

Skypemote.com: dillo con le emotions

Martedì 26 Agosto, 2008

Skypemote

Apre - in beta - Skypemote.com, un progetto nato da un'idea mia e di Nicola (flussodigitale.com), che propone un semplice editor per realizzare simpatici disegni da "incollare" in Skype. L'editor è stato realizzato in Adobe Flash CS3 e, tempo permettendo, vorrei rilasciare anche una versione - desktop - Adobe AIR.
Se utilizzate Skype per "chattare", con questo editor potrete stupire sicuramente i vostri interlocutori. Se trovate questo servizio utile e divertente, non dimenticate di contribuire con proposte, suggerimenti e - se volete - con qualche donazione!! :)
Seguite il progetto perchè ci saranno prossimamente altre "simpatiche" novità.

Simple Flash Project Generator 0.5: una AIR application per Flash

Lunedì 18 Agosto, 2008

In Actionscript 3.0 for beginners: lesson #1 abbiamo visto i passi necessari per la creazione di un progetto in Flash CS3. Così mi è venuta l'idea di automatizzare, in qualche modo, questo processo grazie alle caratteristiche di Adobe AIR. Ho realizzato una semplice applicazione in Adobe AIR in grado di generare in automatico tutti i file (.flp, .fla, .as) che servono per un minimale progetto in Flash.

Simple Flash Project Generator

Simple Flash Project Generator crea una cartella nominandola con il nome del progetto. Inserisce all'interno sia il file di progetto (.flp) sia un documento filmato vuoto (.fla) e uno scheletro di classe documento (.as). Aprendo il progetto troverete già tutti i file che vi servono, con la classe documento già impostata. L'unica cosa da fare è inserire tale classe nelle proprietà del filmato Flash! Unica cosa che non sono riuscito ad automatizzare.
Se avete consigli o suggerimenti per migliorare questo tool non esitate a commentare.

Furti, copie e cloni sul Web: mi hanno clonato il sito

Martedì 12 Agosto, 2008

Oggi stavo dando un'occhiata ai report generati da Google Analytics quando osservando alcune pagine del mio sito e-lementi.com mi accorgo di una serie di "strani" link:

image

Chi diavolo è PixelFabrica? Come diavolo è finito quel link sulle statistiche? Ho un virus?! Così cerco su Google e vado a capitare su:

image

Incredibile! Mi hanno copiato il "vecchio" (vedi anche: Case Study) Layout...!! Non solo hanno copiato il layout nel senso grafico... dopotutto è più che normale ispirarsi a lavori altrui. Ma costoro hanno proprio copiato il codice! Dall'HTML al CSS. Tra l'altro non sono stati nemmeno attenti, infatti passando con il mouse sopra il titolo "digitalcodices.org" delle tre news appare la scritta "Nasce undolog.com"!

image

Inoltre non hanno capito nemmeno il funzionamento "sottile" dei CSS. Cliccando sui menu della navigazione la selezione della pagina visualizzata rimane sempre sulla Home, cosa che non succedeva con il mio layout: cara PixelFabrica, se vuoi una consulenza mi puoi contattare! Insomma, se volete proprio "copiare" fatelo almeno bene!!

Qualcuno dirà che segnalando tutto questo gli sto facendo "pure" un favore... una bella operazione di Viral Marketing... tuttavia è la prima volta che vengo "clonato" in questo modo spudorato, e la sensazione che provo la devo ancora decifrare! :) Ecco come si presentava infatti e-lementi.com prima del restyling del 2008:

image

Actionscript 3.0 for beginners: lesson #1

Venerdì 8 Agosto, 2008

Premsssa

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 a leggere... »

Usare i Template WordPress per creare una Sitemap

Mercoledì 16 Luglio, 2008

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:

PHP:
  1. /*
  2. Template Name: Sitemap
  3. */

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:

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

Safari, eliminare il blue border sui campi input

Lunedì 14 Luglio, 2008

Safari, il browser Apple disponibile anche per Windows, produce un bordo blu (blue border) quando si clicca all'interno di un campo input. Se in alcuni casi può risultare piacevole, in altri diventa davvero fastidioso! Per eliminarlo basta inserire nel nostro foglio di stile:

CSS:
  1. /* ____________________________ remove blue border */
  2. input { outline: 0 none }

O, in alternativa, direttamente come attributo nel tag input:

HTML:
  1. <input style="outline: 0 none" ... />

Flash CS3: creare un effetto Reflex su qualsiasi MovieClip

Mercoledì 4 Giugno, 2008

Sfruttando una notevole caratteristica di Actionscript 3.0 (vedi Actionscript 3.0: tutto con l'operatore new) ho creato una classe ReflexMe in grado di generare un effetto "riflessione" su un qualsiasi MovieClip presente in libreria.

Loading Flash Player...

Il sorgente fa parte del pacchetto undolibrary - presente su GoogleCode - ma se volete potete scaricare il singolo file ReflexMe.as.

Continua a leggere... »