Questo problema ci può capitare maggiormente durante la lettura di un file XML che risiede su un altro dominio.

Per abilitare la lettura da domini diversi è necessario utilizzare un file che regoli l’accesso alle informazioni del dominio esterno, che per i soliti motivi di sicurezza il Flash Player nega di default.

Il file da creare è un semplice XML di nome crossdomain.xml da caricare nella root del dominio.

Andiamo a vedere insieme come configurare il file XML.

Questa è la versione del file crossdomain.xml accessibile a qualsiasi utente.

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" secure="false"/>
</cross-domain-policy>

Questo tipo di sintassi va utilizzata solo se vogliamo offrire un servizio accessibile a qualsiasi utente.

Mentre se vogliamo renderlo accessibili solo ad alcuni domini dovremo scrivere all’interno del nostro file XML:

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="dominio.it"/>
<allow-access-from domain="www.dominio.it" />
</cross-domain-policy>

Una volta impostato il file XML, come scritto in precedenza ci basterà inserirlo nella root del dominio in questione.

I Tag Principali

Vediamo i tag principali che possonoe ssere usati del file crossdomain.xml

• site-control: Questo tag permette di regolare eventuali crossdomanin alternativi, ad esempio per leggere un file diverso da quello principale.
• allow-access-from: Questo tag è uno dei più importanti infatti viene utilizzato per includere l’accesso alle informazioni a uno o più domini.
• allow-http-request-headers-from: Questo tag viene utilizzato per consentire il passaggio di particolari header tra i domini.

Maggiori Informazioni

• Cross-domain policy file specification
• Policy File – condividere risorse XML
• Cross domain per il Flash Player
  

Avevo da tempo l’idea di stravolgere completamente il tema di JD, ma visto che è rischioso a livelli di comunicazione e ci sarebbe voluto parecchio tempo per analizzare alcuni fattori, ho voluto per ora effettuare solo un piccolo restyling grafico.

Restyling Logo

Ecco le differenze principali del restyling del nuovo logo:

• Sfumatura sfera
• Font e sfumatura
• Contorno più tenue
• Ombra inferiore
• JD interno alla sfera

Nel logo vecchio mi ha sempre dato problemi la stanghetta della J che usciva dal logo, un errore sottovalutato ai tempi corretto ora con la nuova versione.

Anche se l’idea era carina, a livello di favicon, stampa su oggetti la stanghetta fuori dalla circonferenza del logo si perdeva parecchio non facendo capire bene la lettera J.

Il logo nuovo riprende lo stile grafico di quello vecchio con colori e dimensioni correggendo alcuni errori citati sopra del logo vecchio.

Tema Grafico Prima

Tema Grafico Dopo

Il restyling oltre il logo ha voluto evidenziare principalmente i due menu di navigazione.

Il primo in alto rivolto ad alcuen informazioni sul blog e il secondo in basso riferito ai contenuti.

Inoltre lo spazio sotto il menu di primo livello attualmente è riservato a titoli di articoli in evidenza.

Ringraziamenti e Pareri

Forse nei prossimi giorni ci saranno altre piccole modifiche a livello grafico, per ora cosa ne pensate?

Volevo ringraziare Federico e Mirko con i quali ho discusso in anteprima del restyling e mi hanno dato pareri e consigli interessanti.

Il progetto è open source, abbiamo la possibilità di provare una demo o leggere una documentazione dettagliata.

L’applicazione permette di creare meeting e far accedere nello stesso tempo più utenti tramite VOIP condividendo le proprie webcam o desktop.

Il progetto è strutturato specificamente per formazione a distanza o per riunioni interne.

Abbiamo la possibilità di caricare presentazioni PDF o documenti di Office, e avere un’ottima navigazione tramite zoom, puntatori ecc.

BigBlueButton si basa completamente su tecnologia open source e può essere ulteriormente migliorata con le API fornite.

Le risorse sono disponibili solo per le donne Fan di JuliusDesign su Facebook entro la sera dell’8 Marzo 2010.

Se sei fidanzata con un Web Designer o lavori nel campo o conosci qualche amica che potrebbe essere interessata non perdere questa occasione, condivi condividi condividi!

Andiamo a vedere insieme il contenuto di queste risorse:

Contenuti

• Risorse Flash [233M]
  • Banner
  • Form Mail
  • Menu
  • Pageflip
  • Photo Gallery
  • Player Video & Audio
  • Utiliy

• Risorse Vettoriali [93M]
  • Oltre 1400 Icone
  • 54 Loghi vettoriali
  • 20 Elementi .PSD
  • 20 Elementi .AI
  • 20 Theme Layout PSD

• WordPress Theme [4M]
  • 10 Temi Premium WP

Contenuti Extra

Nel JD Pack Premium è possibile trovare altre risorse esclusive come:

• Guide Ebook PDF: esempi pratici su AS2, HTML, CSS, JavaScript, Php+MySql
• Risorse Flash Esclusive
• Flash Games
• Sfondi iPhone

Potrete trovare anche risorse inedite, esperimenti, appunti e risorse interessante maturate durante lo studio.

Come ottengo le Risorse?

Per ottenere il link al downlod diretto diventa Fan di JuliusDesign dal box qui sotto.

Domani 9 Marzo riceverai un’aggiornamento dalla pagina fan con il link diretto al download valido solo per 7 giorni

Ovviamente saranno incluse anche tutte le ragazze gia fan di JuliusDesign.

Ancora tanti e sinceri auguri!

Anche se a volte lo sviluppo orizzontale deve essere studiato bene e quindi non accessibile per tutti i progetti, bisogna notare che è un ottimo sistema per una nuova esperienza di navigazione.

Vediamo insieme questa raccolta di 20 Siti Web sviluppati in orizzontali.

1. Hasrimy

2. Sarah Rhoads

3. Farmhouse Fare

4. Vanty Claire

5. 180 Degrees

6. CSSZenGarden

7. Paolo Boccardi Photography

8. Dean Oakley

9. We Shoot Bottels

10. Faub

11. Swear Words

12. WallSwaps

13. Visuall

14. Graphic The Rapy

15. LoveBento

16. Suie Paparude

17. SectionSeven

18. Snohetta

19. Toothjuice

20. Lucama

Oggi vi segnalo questo fantastico video che riprendere Il potere della Forza di Star Wars, da premiare l’esecuzione e la post-produzione.

Il video Lego – The Force Unleashed

Clicca qui per vedere il video incorporato.

Attualmente HTML5 è supportato in basse percenuali da Chrome, Firefox, Opera e Safari, questo non ci deve impedire di conoscere il suo uso per tempi più maturi, in modo da essere un passo avanti agli altri e aumentare le nostre conoscenze.

Andiamo a vedere insieme la nuova struttura che caratterizza l’HTML5, articoli e guide di approfondimento.

Struttura HTML5

In HTML4 siamo stati abituati a scrivere una pagina web utilizzando la seguente sintassi di codice.

In HTML5 sono stati introdotti nuovi elementi, che hanno l’obiettivo di rendere più semantico e significativo la struttura della pagina web.

Il primo colpo d’occhio vi porterà a pensare che i famosi <div> siano stati sostituiti con questi nuovi tag, invece capirete mettendo le mani sul codice di riuscire ad ottimizzare la struttura in modo semplice e molto più chiaro.

Come vediamo dalla struttura qui in alto sono stati sostituiti i tag di HTML4 in altri più semantici e validi.

E’ stato sostituito da HTML4 a HTML5:

• <div id=”header”> in <header>
• <div id=”sidebar”> in <aside>
• <div id=”main_content”> in <section>
• <div id=”footer”> in <footer>

Ovviamente ricordiamoci che anche questi tag si chiudo in </> quindi ad esempio <header> …. </header> oppure <aside> …. </aside>

La struttura lato codice della bozza qui in alto sarà simile a:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<header>
<h1>USIAMO HTML5</h1>
</header>
<nav>
<ul>
<li><a href="#">NAV1</a></li>
<li><a href="#">NAV2</a></li>
<li><a href="#">NAV3</a></li>
<li><a href="#">NAV4</a></li>
</ul>
</nav>
<section>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>

I Principali Elementi HTML5

Elemento <!doctype html>

Rappresenta la dichiarazione della pagina molto semplificata rispetto all’HTML4 che precede qualsiasi elemento del documento.

Elemento <header>

Rappresenta una sezione della pagina in cui inserire la testata del sito web, qui possiamo inserire un logo o un motto.

Elemento <nav>

Rappresenta una parte della pagina che contiene i link di navigazione del sito, quindi qui inseriremo i menu di navigazione.

Elemento <section>

Rappresenta un’area in cui inserire del contenuto generico.

Elemento <article>

Rappresenta una sezione della pagine indipendente, quindi riferita ad articoli

Elemento <aside>

Rappresenta una sezione della pagina collegata al sito e non obbligatoriamente al contenuto. In questa sezione possiamo riconoscere le famose sidebar di un blog.

Elemento <footer>

Rappresenta la sezione conclusiva del sito in cui inserire alcune informazioni del sito.

Aprofondimenti

HTML5, vuoi dare uno sguardo alle novità che porterà con sè?

HTML5: introduzione alle novità

Un’anteprima di HTML 5

HTML5: L’inizio della fine per i player Flash?

Ispirazioni

Siti Web in HTML5

Guide & Tecniche

HTML5 Tag References

Creare un blog con HTML5

HTML5 video for everyone

Oggi vi segnalo AgencyNet 2.0

Davvero geniale il sito di questa agenzia in cui viene riprodotta la sede e le varie sezioni come fossero dei verie propri uffici.

Come possiamo vedere ogni personaggio alla sua postazione, ha la possibilità di far visualizzare un suo aggiornamento direttametne da Twitter.

Originale la navigabilità di alcune aree semplicemente formando con il mouse la direzione in cui andare.

Ottimo l’uso di video e di 3D, efficace la scelta di far divertire l’utente durante la visita.

Il sito è stato realizzato dai creativi Group94

ps: Non ho la certezza che la sede sia strutturata proprio come vediamo dal sito, ma se fosse così sarebbe molto cool!

Queste ispirazioni e riflessioni ci permetteranno di focalizzarci sullo sviluppo grafico dei personaggi e la comunicazione usata sul web da diversi punti di vista.

Oggi iniziamo con Alice in Wonderland.

Clicca qui per vedere il video incorporato.

Le avventure di Alice nel paese delle meraviglie è un’opera letteraria pubblicata per la prima volta il 4 luglio 1865 scritta dal matematico e scrittore inglese reverendo Charles Lutwidge Dodgson, sotto il ben più noto pseudonimo di Lewis Carroll.

Continua su WikiPedia

Scopriamo insieme il sito ufficiale, foto, illustrazioni e video del film.

Sito Web Ufficiale

Il sito ufficiale completamente in tecnologia Adobe Flash, è strutturato in modo da focalizzare l’attenzione sulle immagini di sfondo.

Il menu laterale a comparsa è chiaro e funzionale, interessante la sua animazione di entrata e scomparsa nello stile del film.

Poco chiara la possibilità di passare da un personaggio all’altro, mettendo in evidenza anche gli altri personaggi.

Da segnalare i preloader per ottimizzare i tempi di caricamento del sito a forma di tazzina di caffè e orologio, molto graziosi e in stile al film.

Ottima la scelta di integrare Twitter e Facebook, con il quale è possibile leggere alcuni pensieri dei fan direttamente dalla home.

La visualizzazione dei video e testi è strutturata in modo da non coprire mai del tutto le immagini lasciando il loro valore grafico e comunicativo.

Ben strutturata l’area relativa ai personaggi/attori, in cui potremo curiosare tra le diverse sezioni messe a disposizione.

Sito Web Italia

Spesso per Film destinati al Cinema non si usa solo tradurre il contenuto, ma in altri paesi viene addirittura stravolto a livello strutturale e grafico.

Come possiamo vedere nella versione Italiana la struttura è diversa, siamo entrati nel sito accompagnati con dei video che raccontano come è iniziato tutto,  forse più coinvolgenti dalla versione USA?

La splash page ovvero la pagina di introduzione al sito simula la caduta infinita di Alice, durante cui possiamo vedere il trailer in ambiente 3D.

Qui avremo la possibilità di accedere al sito dal pulsante Entra nel Sito oppure navigare grazie al menu in alto, forse in poco evidenziato dal resto.

Una volta entrati nel sito i personaggi ci accolgono durante la pausa thè, qui potremo selezionare uno dei personaggi per accedere alle loro informazioni.

Graziosa l’idea dello slider orizzontale attivato dal movimento del mouse e l’uso di bagliori e titolazioni del personaggio.

L’area del personaggio forse è più divertente di quella USA infatti potremo interagire inserendo una nostra foto al posto di quella dell’attore.

Questo giochino generà viralità quindi ottima l’idea di svilupparlo e integrarlo nel sito.

Immagini dal Film

Illustrazioni

Video

Trailer

Clicca qui per vedere il video incorporato.

Alice in Wonderland flash mob

Clicca qui per vedere il video incorporato.

ALICE IN WONDERLAND – Il Cappellaio Matto

Clicca qui per vedere il video incorporato.

Avril Lavigne: Colonna sonora di Alice in Wonderland

Clicca qui per vedere il video incorporato.

Oggi vi segnalo il Font Yorkville – Free Download

Questo font lo consiglio per loghi o scritte lineari con una comunicazione elgante e raffinata.

Vediamo tuti i caratteri al completo: