Amate Wikipedia alla follia? Da oggi potete partecipare al Wikipedia Code Challenge.

Di cosa si tratta? Wikipedia ha organizzato un contest per sviluppatori con tre progetti ben distinti: uno slideshow fotografico HTML5, uno strumento di upload fotografico da cellulari e smartphone e per concludere uno strumento che permetta agli utenti di vedere in tempo reale le modifiche effettuate dagli autori sulle pagine.

Il premio? La gloria imperitura, da quel che ho capito.

Segui @naponews su twitter!

CC BY-NC-SA 2006 - 2011 · Wikipedia Code Challenge

Ad inizio Agosto Adobe ha rilasciato Edge, un applicativo desktop che permette di utilizzare un editor visuale per creare ed esportare animazioni in HTML5.

Una volta installato l’applicativo dal sito ufficiale, potremo iniziare a familiarizzare con l’editor molto simile ad After Effects.
L’editor si presenta con una interfaccia molto familiare per chi usa i software Adobe, infatti troviamo pannelli di proprietà, monitor, timeline, keyframe ecc.

Esempi AnimazioneGetting Jumpy 1Getting Jumpy 2Sunshine and SailingFerris Wheel and Roller CoasterSimple Rich AdSono davvero tempi duri per l’amato Adobe Flash, che mese dopo mese sta perdendo terreno in diverse sue attività che svolgeva come leader.
La scelta di creare e sviluppare questo strumento da parte del team Adobe ci deve trasmettere fiducia, in quanto in molti stanno seguendo la strada giusta nel sostenere il futuro standard HTML5.
Un ottimo tool da provare e da conoscerne l’esistenza, in futuro credo potrebbe riservare delle dolci sorprese.
Presentazione Adobe Edge
Avete avuto modo di provarlo? Cosa ne pensate?

Edge è la risposta di Adobe alla continua ed inevitabile ascesa di HTML5. Già alcuni  si chiedono se Flash ormai sia superato da HTML5. Probabilmente in Adobe da tempo si saranno posti dei quesiti su come comportarsi davanti a questa imminente rivoluzione, ed inevitabilmente si dovranno adattare alle richieste del mercato. Probabilmente Edge, un editor HTML5, è la mossa vincente.
Già esistono convertitori di file Flash SWF in HTML5, wallaby di Adobe, ma anche Google vuole contribuire con Swiffy un altro convertitore FLAH to HTML5.

Un editor HTML5
Ma ora con Edge avremo la possibilità di realizzare animazioni HTML5 con un editor simile a quello che già in molti conoscono di Flash, quindi con una timeline, keyframe, motiont, rotazioni….
Adobe mette a disposizione un Preview gratuita di Edge installabile su Windows e su Mac, per poter procedere al download di Edge serve un account Adobe, l’iscrizione è gratuita. La demo di Edge sarà gratuita utilizzabile gratuitamente fino alla fine del 2011. Non perdete tempo!

Qualche esempio di HTML5 con Edge

Ecco qualche esempio di Edge direttamente dal sito di Adobe:

Getting Jumpy 1
Getting Jumpy 2
Sunshine and Sailing
Ferris Wheel and Roller Coaster
Simple Rich Ad

Una prova veloce di Edge
L’ho installato ed ho provato ad aprire Edge per creare la mia prima animazione HTML5, naturalmente molto banale, e molto semplice. Curiosando nel codice mi accorgo della presenza di jQuery probabilmente per garantire il funzionamento delle animazioni anche su browser obsoleti.

La pagina ufficiale di Edge:
http://labs.adobe.com/technologies/edge/

Una riflessione…
Secondo voi un editor HTML5 è un bene o un male? Questo dubbio mi è venuto quando ho ricevuto un riscontro da @Luglio7 su twitter.
Nella storia i vari editor che hanno aiutato a compilare codice spesso hanno contribuito a rendere il codice più pesante e pieno di errori, a partire dal Front Page, ma anche Dreamweaver ci metteva del suo.
Cosa dire del fatto che ultimamente sul web, la navigazione si è fatta più piacevole ed usabile, merito anche della quasi scomparsa dei menu animati tipici di Flash. Con Edge, o con qualsiasi altro Editor HTML5, rischieremo di rivedere animazioni che ci faranno impazzire?

Lo stesso team di HTML5 Boilerplate, ha realizzato una versione per mobile chiamata Mobile Boilerplate.

Avremo la possibilità di scaricare gratuitamente dei file e documentazione, che ci permetteranno di avere un modello base da cui iniziare con i nostri progetti web su mobile.

Mobile Boilerplate non è un framework, ma è integreato con progetti come jQuery Mobile, Sencha Touch, PhoneGap e Appcelerato.

Questo progetto open mira a diventare un modello di base per iniziare a creare un’applicazione web mobile.

Caratteristiche:

Compatibilità cross-browser (IE6 incluso)
Integrazione con HTML5
Impostazioni di caching e compressione ottimali per le migliori prestazioni
Ottimizzazioni per i browser mobile
Classi specifiche per IE per il massimo controllo cross-browser
Comode classi .no-js e .js per stili basati sulle capacità del browser

Sul sito ufficiale è possibile accedere a guide e documentazione dettagliata.

Mobile Boilerplate funziona con tutti i browser moderni e ha il pieno supporto per eredità Blackberry, Symbian e IE Mobile.

Non ci resta che ringraziare questo fantastico team e tuffarci in questa nuova risorsa per creare applicazione web mobile.

D3 è un framework in jQuery che permette di trasformare la lettura di complessi dati statistici in elementi grafici interattivi.

Questo framework è molto flessibile composto da diversi moduli, e si appoggia sulle ultime novità in ambiente web come HTML5, CSS3 e SVG.

Abbiamo la possibilità di approfondire questo framework leggendo una ricca documentazione api e vedere alcune demo in azione.

Gli esempi sono molto interessanti, e ci permettono di capire le potenzialità di questo framework.

Le performance sono notevoli, infatti è possibile creare animazioni grafiche grazie alla moltitudine di lettura dati in pochissimo tempo.

Popcorn.js è un framework open source in HTML5 per la visualizzazione di video sincronizzati con contenuti interattivi.

Il framework si appoggia al tag <video> nativo di HTML5, implementando alcune nuov funzionalità grazie ai plugins realizzati dalla community.

Grazie ai plugins sarà possibile  inserire contenuti interattivi a seconda dei frame in visualizzazione, come immagini, grafici, mappe, link e qualsiasi altri cosa.

Vediamo alcune demo in azione:

Notre Poison Quotidien
Donald Duck
PBS News Hour

In questi esempi possiamo vedere come i contenuti possano aumentare il flusso di informazioni di un video.

Il progetto è open source, ed è possibile utilizzare e migliorare il framework partecipanto alla community dei sviluppatori.

Abbiamo la possibilità di leggere una documentazione dettagliata sul correto funzionamento di questo framework, usare API e Plugins.

Interessante vero?

Appassionati al mondo dell’arte, a quello della grafica e, per non far mancare proprio nulla, desiderosi di sperimentare personalmente le fattezze e le potenzialità dell’HTML5?
Bhe, in caso di risposta affermativa, allora, di certo, non potrete lasciarvi sfuggire una fantastica risorsa online quale The Endless Mural.
Si tratta infatti di una recente e sorprendente applicazione web sviluppata in HTML5, ovviamente utilizzabile in maniera del tutto gratuita e senza dover effettuare alcun tipo di sottoscrizione, che, con una buona dose di creatività ed il minimo impegno, consentirà di disegnare facilmente forme artistiche astratte tridimensionali che saranno poi esposte in un’apposita sezione del servizio contente tutte le creazioni realizzate dai vari utenti.
(...)Continua a leggere The Endless Mural, creare bellissimi disegni con forme astratte sfruttando l’HTML5, su Geekissimo
The Endless Mural, creare bellissimi disegni con forme astratte sfruttando l’HTML5, pubblicato su Geekissimo il 07/11/2010
© Martina Oliva (Bugeisha) per Geekissimo, 2010. | Permalink | 2 commenti | Aggiungi su del.icio.us Hai trovato interessante questo articolo? Leggi altri articoli correlati nelle categorie Internet. Post tags: applicazione online, astratti, disegnare, forme, html5, The Endless Mural, tridimensionale

L’altra volta avevamo visto alcune strategie e consigli su come creare un layout grafico per iPhone, oggi parliamo di iPad.

Tra l’iPhone e iPad ci sono numerose differenze e durante la progettazione grafica non bisogna sottovalutare alcuni aspetti.

Uno degli aspetti più caratterizzanti dell’iPad è la sua variante di visualizzazione a seconda dell’orientamento orizzontale e verticale dell’iPad.

Andiamo per ordine, scopriamo insieme alcuni informazioni tutili per creare un layout grafico per iPad.

Il Browser
Il browser che troviamo in ogni iPad è identico a quello dell’iPhone ovvero Safari Mobile e si basa su WebKit, lo stesso motore di rendering di Safari per Mac e Windows e per altri browser.

Il browser supporta linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, CSS 3 (in parte), JavaScript 1.4, supporto del Dom e Ajax.

Abbiamo la possibilità di visualizzare file Pdf e Microsoft Office (Word, Powerpoint, Excel), immagini Gif, Jpeg, Png e Tiff.

Possiamo far riprodurre filmati QuickTime e file MP3 direttamente dalle pagine Web.

Attualmente non vi è il supporto alla tecnologie Adobe Flash o Java, un’ottima alternativa è usare HTML5.

La dimensioni
Alla rotazione dell’iPad, come succede con l’iPhone, avviene una trasformazione di layout in dimensioni, da verticale Portrait a orizzontale Landscape.

Le dimensioni dell’iPad sono differenti dell’iPhone, in verticale in versione Portrait 768px x 1204px e orizzontale in versione Landscape 1024px x 768px

Qui sopra possiamo vedere le misure in pixel di un layout standard per iPad, queste dimensioni sono realizzate in modo da non stravolgere completamente la grafica da orizzontale e verticale.

Se per l’iPhone non vengono quasi mai realizzate due grafiche per la rotazione, in quanto le dimensioni sono quasi simili, per l’iPad spesso si realizzano due versioni.

Conoscere le dimensioni di visualizzazioni del browser è necessario per costruire una grafica ottimizzata e di facile utilizzo.

La struttura
Se stiamo creando la grafica per un’ applicazione non abbiamo molti problemi di compatibilità con altre strutture, in quanto solo una sarà prioritaria.

Qualora volessimo creare una versione mobile di un nostro sito o blog per iPhone o iPad consiglio sempre di realizzare una struttura a parte.

Questo ti permette di scindere le due strutture, web e mobile, e non dover ogni volta rischiare di andare in conflitto con alcune  caratteristiche.

Una volta realizzata la struttura in HTML o HTML5 potremo gestire i due tipi di visualizzazione con i CSS.

Portrait o Landscape?
Avendo due tipi di orientazioni, verticale e orizzontale corrispondenti a Portrait e Landscape, dovremo usare i CSS per condizionare la visualizzazione corretta a seconda dell’orientazione dell’iPad.

Conoscendo le dimensioni delle due versioni potremo condizionare la lettura del file CSS pripario inserendo le seguenti linee di codice tra i tag <head> </head> in questo modo:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

La prima linea di codice abiliterà la lettura di portrait.css se l’orientamento dell’iPad è verticale quindi Portrait, mentre la seconda abiliterà la lettura di landscape.css se orrizzontale quindi Landscape.

Un’altro metodo per gestire le orientazioni dall’interno di un unico CSS è il seguente:

/* Dimensioni Standard */
#wrap {
width:1024px;
}
@media only screen and (orientation:portrait){
/* Dimensioni per orientamento Portrait */
#wrap {
width:768px;
}
}

In questo modo stabiliamo una largezza standard di 1024px, e se le dimensioni cambieranno verranno cambiate con 768px Portrait.

Risorse Vettoriali interfaccia iPad
Ecco un paio di siti web che offrono risorse vettoriali per interfaccia iPad.

iPad GUI PSD

iPad Stencil for Omnigraffle

iPad Icon Set by Chris Spooner

Free Apple iPad PSD File Download

iPad vector GUI elements

Puntuale come non è quasi mai stata, a circa otto settimana dall’ultima release, Microsoft ha reso disponibile la terza anteprima tecnica di Internet Explorer 9.
Le parole chiave su cui questa nuova versione preliminare del browser redmondiano è stato realizzato sono fondamentalmente tre: accelerazione hardware, HTML5 e standard. Si può infatti notare come nella pagina principale del browser (Test Drive) siano “spuntati” dei nuovi test atti a dimostrare l’abilità di IE9 nel riprodurre audio/video in HTML5 sfruttando l’accelerazione hardware.
Fra questi, si fa notare IMDb Video Panorama, una pagina del celebre Internet Movie Database in cui è possibile visualizzare e scorrere trailer cinematografici in maniera incredibilmente agevole e fluida. (...)Continua a leggere Internet Explorer 9 Tech Preview 3 disponibile: mannaggia li pescetti!, su Geekissimo
Internet Explorer 9 Tech Preview 3 disponibile: mannaggia li pescetti!, pubblicato su Geekissimo il 25/06/2010
© naqern per Geekissimo, 2010. | Permalink | Commenta! | Aggiungi su del.icio.us Hai trovato interessante questo articolo? Leggi altri articoli correlati nelle categorie Internet Explorer. Post tags: accelerazione hardware, browser war, html5, ie9, internet explorer 9

If your browser supports HTML5 you can opt into the experimental HTML5 video playback on YouTube. Not only will you get smoother video playback—goodbye Flash!—but you'll be able to speed up and slow down your videos. More »

Flash has taken quite a beating lately by everyone from Apple (no Flash on iPad or iPhones) to YouTube (transitioning to HTML5 video) to users sick of security exploits and sluggish browsers. Everyone's looking for the silver bullet that kills Flash, but is HTML5 it? More »

Per chi come me si sta avvicinando piano piano al mondo dell’HTML 5 e dei CSS3 volevo segnalare un framework che potrà aiutarvi nell’utilizzo di queste nuove tecnologie mantenendo allo stesso tempo il supporto per i vecchi browser come internet explorer 6. Potrete finalmente fare uso dei nuovi tag come header, nav, section, article, footer o i nuovi campi input come url, email, etc oppure le nuove proprietà dei css3 come :selection, gli angoli arrotondati o l’obra sul testo.

Cliccare qui per scaricare 52framework