La data non è ancora presente su Infostud e quindi per prenotarvi scriveteci via mail o su Facebook.

SCARICA APPLICAZIONE PHONEGAP DI ESEMPIO

Lo ZIP contiene una directory con un progetto XCODE completo. Potete scompattarla e aprirla direttamente da XCODE per provarla e personalizzarla per i vostri project works

vorremmo fare uno o più incontri aggiuntivi per sostenervi nei project work. Alcuni di voi hanno preferito per adesso contattarci via mail e stabilire degli appuntamenti singoli, di qualche ora, per revisioni e sostegno tecnico e teorico.
Tutte e due le modalità sono ottime: fateci sapere cosa preferite. Per adesso la maggioranza pare orientata per incontri privati. E’ possibile prendere appuntamenti fino alla data dell’esame.
potete scrivere a
xdxd.vs.xdxd@gmail.com

Modulo 5

Modulo 6

Modulo 7

tutorial, how to create mobile apps for iOS using Phonegap: small crash course

CLICK QUI PER SCARICARE LE SLIDE della lezione 6

oppure consulta le slide qui:

DOWNLOAD LO ZIP DELLE PAGINE PHP DI PROVA FATTE IN LABORATORIO

DOWNLOAD DELLE SLIDE USATE A LEZIONE

Le slide si possono consultare anche da qui:

SCARICA lo ZIP DELLA LEZIONE

La pagina è molto semplice e siete tutti invitati a giocarci e modificarla, proprio come abbiamo fatto in aula: fare delle ipotesi (ad esempio, vorrei che il primo articolo di ogni sezione fosse scritto con un font più grande) e tentare di ottenerle mantenendo l’HTML invariato (visto che è creato per rappresentare in maniera strutturata e leggibile il contenuto del sito, secondo quanto definito in fase di descrizione dell’architettura dell’informazione) e lavorando solo sul CSS.

In sintesi, nella lezione abbiamo visto le varie fasi tecniche che possiamo seguire nella creazione del sito:

1. Brief iniziale e creazione del concept
2. analisi preliminare: raccolta delle informazioni relative ai contenuti che saranno presenti nel sito
3. architettura dell’informazione: creazione della struttura gerarchica formale delle informazioni presenti nel sito, delle loro interconnessioni, e dei modelli strutturali (non pensando all’estetica, quindi, ma pensando agli elementi) secondo cui sono presenti sulle varie componenti del sito (sulla home page, su una pagina di dettaglio, sulla pagina dei risultati della ricerca…)
4. prototipazione rapida: si creano sketch, wireframe, prototipi rapidi del sito, secondo quanto visto negli altri corsi;
5. passaggio dalla definizione dell’architettura dell’informazione al documento in linguaggio di markup: si prende la definizione formale del punto precedente e si prepara, per ogni punto di vista presente sul sito (home page, elenco categorie, scheda di dettaglio, profilo utente, pagina ricerca…) il documento in linguaggio di markup (ad esempio HTML) che descrive strutturalmente la composizione dei contenuti su quell’elemento del sito; in questa fase non ci si preoccupa, quindi, dell’estetica dei contenuti (se sto pensando, ad esempio, se un certo elemento di contenuto sarà in grassetto, o rosso, o allineato a destra, o sopra/sotto/di lato ad un altro contenuto, o cose del genere, sto commettendo un errore), ma della loro struttura gerarchica e della loro interconnessione e interrelazione
6. creazione della veste estetica: usando gli stylesheet si modella l’estetica del contenuto, curandone il posizionamento, la disposizione sulle superfici di fruizione, l’uso del colore, delle immagini, dei margini, dei font e di tutti gli altri accorgimenti grafici, tipografici ed estetici; gli stylesheet, inoltre, verranno creati in modo da soddisfare i requisiti di fruizione relativi ai diversi media su cui avverrà la consultazione e l’interazione con il contenuto (web, mobile web, smartphone, tablet, stampa, altri canali di fruizione crossmediale)
7. test, valutazione e iterazione del processo: il design viene controllato attraverso dei test (come descritto negli altri corsi di orientamento) i cui risultati vengono analizzati e valutati al fine di intervenire in maniera correttiva, procedendo così di iterazione in iterazione fino ad arrivare al design finale

La prossima lezione (24 Maggio 2011) vedrà questi concetti applicati alla creazione di un template per il Content Management System WordPress

Si consiglia di iniziare a leggere la documentazione di WordPress. Ecco qui di seguito alcuni link di interesse:

• WordPress: http://wordpress.org/
• La documentazione: http://codex.wordpress.org/Main_Page
• Come estendere e personalizzare WordPress: http://wordpress.org/extend/
• Il forum della community di sviluppatori e designer che usano WordPress: http://wordpress.org/support/

Le slide della lezione introduttiva sul Design Cross mediale & Publishing sono qui

Infographics designers love to snark about the bastardization of their discipline. When any schmuck can throw together a few lines and circles, slap in some Helvetica captions, and call it data visualization, doesn’t that degrade design literacy? Probably, but giving average people the means to experiment is the only way design literacy gets better, too. Example: Jose Duarte’s “Handmade Visualization Toolkit,” which throws perfect mathematical accuracy aside in favor of encouraging MacGyver-like physical hacks. Let’s face it: Statistics aren’t something you can touch, which is probably why so many of them seem flimsy and fake. Turning them into abstract visual shapes can help. But using a small balloon and a ping-pong ball to compare and contrast the relative growth of Internet users over the past decade? That’s the kind of physical, (literally) graspable process that easily translates into actual understanding — or at the very least, better questions.

The first question I’d ask while holding those two spheres, for example, is this: If I stuffed that balloon full of small ping-pong balls, would the math work out? 1.9 billion divided by 361 million is about five and half. So, if the little ping-pong ball represents 361 million, five (ish) of them should fill up that balloon to bursting. But look at it: You could fit way more little balls inside that larger three-dimensional sphere. So what does that say about these stats, and how you can accurately visualize them? What if I treated the shapes not as 3-D spheres, but as flat circles in the photograph itself — would that make it accurate? Blammo — instant design-literacy lesson! The world is awash in lies, damn lies, and statistics. Duarte’s visualization kit isn’t about pumping out pristine graphics worthy of the New York Times, it’s about encouraging something much more important: critical thought. As soon as my first kid is old enough for the “Homemade Visualization Kit” not to be a choking hazard, I’m getting one.

The Arab uprisings of the last several months, which have swept through Egypt, Tunisia, Libya, and several other countries through the Middle East, have posed a tremendous challenge to anyone trying to get a grasp of what’s going on or anyone actually trying to tell the story. How do you link literally hundreds of events, scattered across over a dozen countries, all of which have related to each other, but each of which deals with completely separate political realities?

Here’s the best attempt we’ve seen yet, courtesy of the data-viz wizards at The Guardian. Arab Spring, an interactive timeline, presents all the events in a nifty UI that you can scroll through.

Events in different countries are separated as columns. But the most interesting part is that only a snippet of the entire timeline is visible; to appreciate it, you roll through it, literally watching the events unfurl. Click on any one of them, and you get a detailed view of what happened. Each one is color coded by event type, whether that’s a full-on regime change, a political move, a protest, or an international response.

The brilliance of this UI is that it immerses you in the actual narrative of the events. Moreover, it allows you to see how all the hundreds of protests affected one another during this remarkable flowering of political consciousness.

Check it out here.