due chiacchiere

Il tema è sempre più… mobile

In questi giorni sto spendendo il mio tempo libero in una serie di aggiornamenti a tutto campo: dal netbook su cui ho installato Windows 7, al cellulare aziendale su cui ora gira la versione 5 del sistema operativo di Cupertino, passando per il blog dove ho già la beta di WordPress 3.3. A proposito di blog, mi son messo al lavoro (come capita ogni anno di questi tempi, a quanto pare) per rendere il mio tema un po’ più facile da navigare sui dispositivi mobili. Tutto nasce da uno dei progetti assegnati al mio gruppo al lavoro: l’implementazione della versione mobile del sito d’ateneo. Cosa affatto non facile quando hai alcune migliaia di pagine gestite da una trentina di uffici diversi, ed un sistemista che preferisce usare Solaris (e relativo server web) a Linux ed Apache.

Così approfitto per trasformare la mia casetta virtuale in un laboratorio creativo dove sperimentare quanto di più avanzato si trova oggi in questo settore. Allo stesso tempo sto introducendo alcune piccole novità al tema che vedi sul computer di casa: principalmente piccoli ritocchi estetici, come le freccettine nella navigazione in cima, ad indicare che si aprono le tendine passandovi sopra con il mouse, o la didascalia sotto le foto, o ancora un nuovo stile per le ricette. Ma anche alcuni elementi funzionali, come la possibilità di andare all’articolo precedente e successivo nella cronologia, senza dover far salti mortali (grazie alla segnalazione di un affezionato lettore in merito).

Probabilmente scriverò una miniserie sulle tecniche adottate, ma nel frattempo c’è qualche anima pia dotata di telefonino intelligente in grado di darmi il proprio parere, eventualmente commentando proprio dal dispositivo? Tutti gli altri possono accontentarsi di restringere la larghezza della finezza il più possibile, per avere un assaggio del tema mobile. C’è una cosa che non riesco a risolvere: il campo di ricerca in cima, nella versione mobile, appare su tutti i dispositivi tranne l’iPhone. Suggerimenti?

Commenti

  1. evilripper ha detto:

    purtroppo non ti posso aiutare anche perchè non ho iphone… -_-‘ ma tu come fai a fare le prove?
    cmq il fatto che a seconda di quanto restringi il layout e diventa mobile style è fantastico… tema fantasmoso compreso! 🙂

    1. camu ha detto:

      @evilripper: eh eh grazie, io lo chiamo tema “superliquido” 🙂 Io le prove le faccio con gli emulatori: sia quello per Android che quello per Windows Mobile sono gratuiti e non bisogna essere membri di nessun circolo privato di sviluppatori come capita invece per la Apple… in quel caso per fortuna ho il telefono aziendale a venirmi in soccorso.

  2. vito ha detto:

    Quoto la miniserie sulle tecniche adottate per rendere navigabile il tema. Il giudizio di navigazione su androidiani è ottimo nel complesso.

    1. camu ha detto:

      @vito: sarai accontentato a partire da domani, con la prima puntata di questa miniserie 🙂 Su che dispositivo hai fatto le prove, se posso chiedere?

  3. Luigi ha detto:

    Ciao, sull’iphone non so dire. Però con Opera Mini su android 2.3.3 in un Samsung Galaxy S la ricerca compare ma della scritta “due chiacchiere” si vede sola la cima delle lettere e il pulsante |cerca| non si affianca al campo ma scende (sia con orientamento H e V, indifferentemente). (http://www.opera.com/mobile/demo/)

    1. camu ha detto:

      @Luigi: grazie, non avevo ancora fatto le prove con questo browser. Il fatto che la scritta compaia tagliata sembra dovuto al fatto che Opera Mini non interpreta correttamente una direttiva CSS, il background-size, che uso per riproporzionare il titolo senza dover caricare un’immagine diversa. Inoltre pare che la larghezza della viewport in quell’emulatore sia meno di 320px, che ho usato come punto di riferimento “minimo” per il tema mobile. Per questo il cerca va a capo…

      Mi hai dato ottimi spunti di riflessione, ci lavorerò su 😉

    2. camu ha detto:

      @Luigi: okay, il problema del campo di ricerca dovrebbe ora essere risolto. Ho notato comunque che mentre l’emulatore Java online non capisce ancora CSS3, quello da scaricare che s’installa sul computer, è più “aggiornato” e l’impaginazione è più conforme a quello che avevo in mente.

      1. Luigi ha detto:

        @camu: oh, yes, risolto.
        Grazie per il tip sull’emulatore, lo tenterò.

      2. CyberAngel ha detto:

        @camu: Che emulatore usi, sia offline che online?

        1. camu ha detto:

          @CyberAngel: ne parlerò più in dettaglio nella prossima puntata della mia miniserie 🙂

  4. vito ha detto:

    Htc wildfire con android 2.3.7 😉

    1. camu ha detto:

      @vito: grazie 🙂

  5. from uk ha detto:

    dopo faccio una prova da android!
    Bello il tema di halloween

    1. camu ha detto:

      @from uk: grazie, al quadrato 🙂

  6. kakarothx ha detto:

    Primo OT: Bello il tema di Halloween.
    Secondo OT: Come ti trovi col nuovo I-Os? Mi hanno detto che va lentuccio sull'”Interfono”4 ..

    1. camu ha detto:

      Mah, a me pare abbastanza performante, ogni tanto la finestra dei settaggi mi si chiude mentre cambio qualcosa, ma nulla di più. Comunque rimani sintonizzato, ho pronto un articolo proprio su questo tema a giorni 🙂

  7. CyberAngel ha detto:

    Su iPhone funziona tutto perfettamente. Se ti serve posso mandarti gli screenshot.
    Complimenti come al solito. 😉

    1. camu ha detto:

      @CyberAngel: oggi ho anche attivato la navigazione tra le stanze “a scomparsa”, attivabile con il pulsantino in cima accanto alla ricerca 🙂 Che ne pensi?

      1. CyberAngel ha detto:

        @camu: L’ho notato. Carina e ben fatta. Bello anche il tocco della freccia grigia sullo sfondo marrone dei titoli degli articoli.

        1. camu ha detto:

          @CyberAngel: il colore dello sfondo riprende quello del mese in corso ovviamente, quindi anche il tema mobile cambierà col passare del tempo, proprio come quello “desktop” a cui vi ho abituati…

        2. CyberAngel ha detto:

          @camu: Ma certo che sì. Comunque elogiavo come sempre le tue chicche nascoste nei dettagli, come appunto la freccia che invita a “tapparci” sopra per aprire l’articolo intero.

        3. camu ha detto:

          Beh i corsi che mi fanno seguire qui al lavoro a qualcosa serviranno 😀

  8. Francesco ha detto:

    Il tema va alla grande sino all’ingrandimento 200% su un piccolo schermo 1024 x 768!
    Che è anche il massimo che chiedo ai miei sviluppi (per quello che vale…).

    1. camu ha detto:

      @Francesco: grazie per averlo messo alla prova. Io oramai non faccio più il test dell’ingrandimento dei font, visto che molti browser e sistemi operativi usano la lente d’ingrandimento, o comunque un ridimensionamento proporzionale di tutta la pagina, non solo dei caratteri 🙂

  9. Francesco ha detto:

    Infatti ho ingrandito la pagina con Internet Explorer 8 e funzia!

  10. ondiz ha detto:

    Molto carina la versione mobile. Nulla da segnalare tutto ok con iPhone 4s.
    Una cosa, nella versione mobile appare la favicon di plesk parallels (provato con Atomic)…

    1. camu ha detto:

      Strano, se aggiungo il sito all’home screen vedo correttamente l’icona del ragazzo. Farò altre prove, grazie per la segnalazione e per aver testato la versione mobile 🙂

  11. ondiz ha detto:

    @camu
    è un piacere quando vedo dei lavori fatti bene.. Poi sono a casa ammalato quindi tempo ne ho 😉

    1. camu ha detto:

      @ondiz: problema risolto 🙂 Non mi ero accorto che quando ho ritraslocato tutto il mio sito su Tophost, quell’altro provider aveva sovrascritto la mia favicon con quella di Plesk! Mannaggia a loro. Grazie ancora per aver notato questo dettaglio e… torna a trovarmi!

      1. ondiz ha detto:

        @camu: ottimo mi fa piacere!
        Ti ho aggiunto tra i miei feed quindi ci rivedremo sicuramente.
        Se magari non trovo la strada puoi venire a trovarmi anche tu 😉
        Buona giornata.

Lascia un commento