Prima della prototipazione – pretoPost

 

Avete un’idea? Di business naturalmente.
Gli investitori vogliono un prototipo?
Vi siete affrettati a passare dall’idea alla fase di protyping?
E vi si siete chiesti se serve il Pretotyping? Cos’è il Pretotyping?

Provo a cimentarmi in questo esercizio:

Alberto Savoia raggiunto l’ultimo capitolo del suo libro intitolato Pretotyping si augura che il lettore sia ora in grado di rispondere alle seguenti domande:

Cosa è il pretotyping?

Il più famoso prototyping o prototipazione è il processo di realizzazione di qualcosa che va dall’idea all’implementazione di un prodotto finito.

Il Pretotyping può considerarsi una fase dove si valuta l’idea facendo in modo di investire poche risorse (tempo, soldi, energie) rispetto a quelle necessarie alla realizzazione del prototipo. Si fanno delle prove per valutare se investire su un prototipo oppure no.

Il suo manifesto viene esposto nel video


Continue reading

Pulizia!! Con OpenRefine

Open refine (OR) non lo utilizziamo per fini di calcolo ma di pulizia, spesso i dati non sono del tutto come si desidera, tra duplicati, caratteri codificati come non ci si aspetta, formattazione non uniforme e altro ancora.

Una cosa importante è che NON lavori sul file ma lavori sul dato!!

Ho seguito una giornata studio al #SOD15 e qui riporto un estratto di alcune operazioni fatte durante il corso rispettando lo spirito di condivisione proprio dell’evento e di questo blog.

Continue reading

Come creare un tema HTML5 per un Blog con Bootstrap

Risorse

Scarichiamo la versione “Source code” dal sito di BootStrap. Andiamo nel sito HTML5Boilerplate

Download Bootstrap

Clicchiamo in “get custom build” dove veniamo indirizzati su Initializr dopo aver cliccato su “H5BP” possiamo fare download.

Get Started

Dopo aver scompattato sia la distro bootstrap che quella initializr, partiamo da quest’ultima aggiungendo sia la cartella less che fonts di bootstrap, poi copiamo nella cartella js di initializr il file minified di bootstrap che troviamo nella cartella dist/js

Ora abbiamo tutto il necessario nella cartella di initializr, possiamo anche rinominare la cartella inizializr con il nome del nostro progetto.

Pagina principale

Dal nostro editor iniziamo a modificare la index.html che troviamo nella root della cartella di progetto.

Rimuoviamo la dichiarazione:

<link rel="stylesheet" href="css/normalize.min.css">

Aggiungiamo la dichiarazione css di bootstrap:

<link rel="stylesheet" href="css/bootstrap.css">

Rimuoviamo gli script di analytics di Google.

Aggiungiamo il javascript minified di bootstrap:

<script src="js/bootstrap.min.js"></script>

Cambiamo la dichiarazione:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

aggiungendo https

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Sempre su index.html rimuoviamo il paragrafo di default presente:

        <p>Hello world! This is HTML5 Boilerplate.</p>

ed incominciamo ad aggiungere i componenti bootstrap necessari.

Componenti

Nella sezione componenti di Bootstrap recuperiamo la navbar copiamo il codice di esempio presente nella pagina e posizioniamolo dove abbiamo rimosso il paragrafo precedente.

I font

Google Fonts

Prendiamo i Google Fonts disponibili , nel campo di ricerca scriviamo ad esempio “source” e facciamo la nostra scelta cliccando sul bottone collection relativo e poi sul tasto “Use”.
Una volta selezionati gli stili desiderati passiamo nella sezione “Add this code to your website” e ci copiamo il codice indicato nella index.html
Nel mio caso è il seguente:

<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,700,900,400italic' rel='stylesheet' type='text/css'>

il file bootstrap.less riporta la riga:

    @import "variables.less";

Quindi non ci resta che modificare il file variables.less, cambiando la proprietà di seguito riportata, da Helvetica Neue in Source Sans Pro:

@font-family-sans-serif:  "Source Sans Pro", Helvetica, Arial, sans-serif;

Nel mio caso ho installato il package less2css per sublime per compilare e rigenerare il file bootstrap.css con le modifiche apportate.

Questa modifica potevamo risparmiarcela generando la stessa modifica con tanto di compilazione dalla sezione specifica

Javascript

Ora spostiamoci nella scheda Javascript. Ho intenzione di aggiungere il componente carousel.

Copiamo il codice presentato sotto il nav tag inserito per la navigazione.

Posizioniamo un div in questo modo:

<div class="container container-wrap">
... inserire il codice del carousel..
</div>

Aggiungiamo le immagini necessarie nella cartella img e sistemiamo gli item interni a carousel-inner tanti quanti ne occorrono.

Ora aggiungo i thumbnail sotto al carousel ma dentro al container del tipo:

 <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="img/slide1.jpg">
      <h1>Title 1</h1>
      <p>Lorem ipsum</p>
      <p><a href="#" class="btn btn-primary btn-block">Read more</a></p>
    </div>
  </div>

il chunk di codice è composto da un’immagine, un titolo, un paragrafo e il bottone per accedere alla lettura completa del post associato.

P.S.

Ricordo che le foto utilizzate per il carousel e i thumbnail sono foto generate dal sito Imageslidermake e il codice creato è scaricabile dal mio repo github.