Archivio per la categoria ‘Mobile’

L’immagine che vedete, quella a sinistra per capirci, è il nuovo logo della tecnolgia CSS3, lo riteniamo talmente brutto che, non sappiamo nemmeno noi il perché, ma ci pareva doveroso far cominciare questo articolo da cotanta bruttezza. Il lettore è stato messo alla prova con un incipit ostico, ci faremo perdonare nel proseguo dell’articolo, al momento può cominciare con lo stropicciarsi gli occhi e, se vuole, proseguire con la lettura.

Al di là dello schifo di logo creato per i CSS3, i nuovi fogli di stile sono una tecnologia tutt’altro che brutta, insieme ad HTML5 rappresentano la next big thing e, mentre il mondo aspetta impaziente la nuova release di Internet Explorer i CSS3 hanno cominciato a diffondersi viralmente nel web: dagli ultimi temi di WordPress e Joomla! ai tanti esperimenti che hanno cominciato a farne uso. Noi abbiamo sperimentato queste tecniche in due lavori recenti: http://www.gardenpeticca.it e http://www.alessandroporretti.it (tutt’ora in costruzione). Nell’ultimo lavoro abbiamo esteso un tema di WordPress mediante la tecnica dei child theme ampliandolo con tecniche proprie dei CSS3.

Ma veniamo all’argomento principale: Le media Query, ovvero l’investigatore che tutto sa e tutto redirige:

Le media query dei nuovi CSS3 sono la diretta evoluzione delle media types introdotte in CSS2:

<link rel="stylesheet" type="text/css" media="screen" href="sans-serif.css" />
<link rel="stylesheet" type="text/css" media="print" href="serif.css" />

I Media Type servivano per definire dei fogli di stile partendo dal tipo di media, nell’esempio di codice appena trascritto, vediamo come abbiamo la possibilità di caricare due diversi fogli di stile, la scelta è legata al tipo di media che carica la pagina, nel primo caso uno schermo, nel secondo una stampante. Per quanto riguarda le media query è stato fatto un passo in più nella definizione del tipo di foglio di stile da caricare. Le media query infatti permettono di differenziare lo stile della pagina per le seguente tipologie:

  • Dimensione minima e massima della larghezza dello schermo.
  • Dimensione minima e massima dell’altezza dello schermo.
  • Colore dello schermo.

Vediamo alcuni esempi di codice:

/* Carica il foglio di stile small.css se il dispositivo che sta caricando la pagina è uno schermo con una larghezza massima di 600px */
<link rel="stylesheet" type="text/css" media="screen and (max-width:600px)" href="small.css" />
/* Carica il foglio di stile new.css se il dispositivo che sta caricando la pagina è uno schermo con un'altezza massima di 380px */
<link rel="stylesheet" type="text/css" media="screen and (max-height:600px)" href="new.css" />
/* Carica il foglio di stile example.css se il dispositivo che sta caricando la pagina è uno schermo con un determinato colore di sfondo */
<link rel="stylesheet" media="screen and (color)" href="example.css" />

Analizzando il codice possiamo vedere come potrebbe essere facilmente esteso il funzionamento della media query per caricare il foglio di stile che ci serve per la visualizzazione del nostro sito. Abbiamo pensato di farvi cosa gradita fornendovi una serie di layout standard (mockup 1024 x 768, iPad, iPhone) per facilitarvi la creazione di applicativi utilizzando CSS3 media query.

E’ possibile utilizzare le media query, ovviamente, anche all’interno di un foglio .css per cambiare uno stile soltanto ad un elemento o ad una classe, vediamone il codice:

@media screen and (max-width:600px) {
.test {background-color: #fff}
}

Chiudiamo la rassegna sulle media query con due link fondamentali:

Documentazione ufficiale CSS3 Media Query

Limiti e potenzialità nello sviluppo di CSS3 Media Query

 

Annunci

Mi scusi, ma per andare dove dobbiamo andare, per dove dobbiamo andare? La celebre frase di Totò e Peppino può sintetizzare lo stato confusionale che deve affrontare il web designer oggi. Non stiamo parlando dei grafici web che lavorano per grandi agenzie con facoltosi clienti che non badano a spese, bensì dei creativi che lavorano principalmente con la Piccola e media impresa.

Il problema principale è l’accessbilità: accessibile a chi? Ora che non basta progettare siti per le diverse risoluzioni dei browser pc, sono intervenuti una serie di nuovi dispositivi che stanno prendendo sempre più quota sul mercato e che non possiamo tralasciare. Parliamo di iPhone, iPad (le quali ci invitano a sviluppare app ad hoc), ma anche tablet e mobile Android, che sposano la filosofia dell’Open Source e, come se non bastasse, BlackBerry e tutta quella serie sterminata di smart phone uno diverso dall’altro sia come schermo che come sistema operativo.

Proviamo a tornare calmi, scomporre il problema e proviamo a ragionare su questa nuova mole di lavoro che ci attanaglia. Partiamo con il primo problema, le applicazioni che sfruttano iOS.

Il sogno e l’incubo dell’Apple Store

L’Apple Store è una gran bella cosa perché: innanzitutto ci fa creare applicazioni per una serie di dispositivi che possiamo considerare il meglio per quello che riguarda i tablet e gli smart phone.

  1. Molti esperti concordano che non ci siano proprio paragoni tra le tecnologie iOS e i suoi simili, anche quelli basati su Android checché ne dica Google.
  2. Le validazioni dell’App da parte dello staff di Jobs & co. assicura la creazione di applicazioni valide e well-formed.

Ma l’Apple Store appare a molti anche una gran brutta cosa:

  1. Non si possono usare per la programmazione prodotti che non utilizzano piattaforme di sviluppo accettate da Apple: “Flash sì, Flash no”, in periodo sanremese, potrebbe essere una sorta di refrain riscritta da Elio e le Storie Tese.
  2. Le validazioni delle App sono qualcosa di cervellotico.
  3. L’iscrizione ad Apple Store costa 99 dollari all’anno
  4. Una volta che avrete ottenuto le autorizzazioni per la vostra applicazione (se avete letto il punto 2 non sembra cosa facile), Apple vi detrarrà il 30% di commissioni per ogni singola app venduta.

La cosa che ci fa ben sperare è che Apple stessa, forse pressata dalla concorrenza, si sta ricredendo sulle sue leggi ferree  e, dopo aver ascoltato le lamentele dei designer e degli sviluppatori, sta pian pianino modificando la propria filosofia cercando di ammorbidirla. Noi, da buoni web designer stressati quali siamo, speriamo che questo proceda il più volecemente possibile, così potremmo aver creato la nostra applicazione per iOS.

Una volta creata la nostra applicazione per l’Apple Store saremo ben felici di constatare che tutti gli utenti di smart phone e tablet diversi non potranno mai utilizzarla.

Passiamo allora al secondo punto per colmare questa spiacevolezza.

Creazione di applicazioni per Android: facile come bere un bicchier d’acqua

La creazione di applicazioni per Android è assolutamente diversa rispetto alle tecniche di sviluppo Apple. Una piattaforma molto semplice da utilizzare per lo sviluppo si chiama App Inventor: il prodotto è estremamente semplice e, i novizi programmatori, potranno esultare: per programmare con App Inventor non serve niente, nessuna base di programmazione, nessuna riga di codice.

I miscredenti dicono che il problema del mondo open source e dei prodigi di App Inventor sia nella qualità di applicazioni che verrebbero rilasciate, per quanto riguarda il primo punto secondo noi non è così importante, “piattaforme” come Java o PHP su tutte hanno rilasciato degli ottimi progetti open, certo, non tutti, ma comunque più di qualcuno degno di nota sì. Per quanto riguarda l’App Inventor siamo scettici anche noi, una piattaforma di sviluppo per neofiti che permette di creare Applicazioni senza scrivere una riga di codice non ci sconfifera tanto, la proveremo e vi diremo, va comunque evidenziato che i programmatori doc possono sempre utilizzare C++ per le loro applicazioni Android.

A questo punto abbiamo capito che una volta effettuata un’applicazione per iOS possiamo crearne una per Android e il maggiore mercato dei principali smart phone e tablet è completato ma, gli altri smart phone, quelli meno “importanti” come, per esempio, BlackBerry?

Realizzare una versione mobile per un sito web

Forse è la soluzione ideale, anche perché non sempre un cliente è disposto a spendere per un sito pc con app Apple, una Android e una versione visible sugli altri smart phone. Secondo noi risulta essere best practice anche perché non bisogna versare soldi a nessuno (Apple Store), né tanto meno chiudere un applicazione soltanto ad un dispositivo (iOS o Android), molte volte un application mobile non è nient’altro che un sito ben fatto, allora perché non utilizzare le media query dei nuovi CSS3 per realizzare un sito visibile su più dispositivi?

Meditate web designer, meditate…