Archivi categoria: css3

Palette ed immagini

Ho scoperto questo giochino mezzo rotto..

http://digitalize.ca/what-the-colour/

SOURCE:  https://github.com/mjangda/What-The-Colour

che sembra carino.. prende delle “palette” di colori,

e facendo una ricerca in una cartella immagini ti da le immagini che riportano quella predominanza colore. NICE!

______________

viene citato questo https://www.tineye.com/ che non conoscevo..

CSS for print

vista l’attuale linea grigia che divide gli epub ed il web.

Perchè non provare a stampare un gitbook, senza esportarlo in pdf ma dandogli tutte le regole css che desideriamo?

  1. scegliamo il tema più adatto tra quelli di gitbook
  2. proviamo un ctrl+P che non si sa mail
  3. denigriamo il risultato
  4. poniamoci nelle condizioni di migliorare!

Capire le pagine:

The Specifications Link

Continua la lettura di CSS for print

Grafici su mobile, rappresentazioni di dati con d3.js responsive!

ci sono due vie:

-ridisegnare tutto al cambiamento della finestra o meglio, scrivere in js già pensando che la pagina sarà responsive.

Oppure:

-usare hw  o vh , ovvero misure calcolate in base alla finestra nei css3

.attr(“width”, “100hw”)
.attr(“height”, “auto”)

-css3 media query con differenti transform:scale(0.5);

Oppure:

-usare svg come vanno usate (ma non tutti i browser sono d’accordo):

https://www.w3.org/TR/SVG/coords.html#IntrinsicSizinghttps://www.w3.org/TR/SVGTiny12/coords.html#ViewBoxAttribute

_________SPIEGAZIONE:

allora, la domanda che ci facevamo l’altro giorno è come avere i grafici fatti con D3 e  in rwd.

La risposta numero uno è scriverli pensandoli responsive.

Ammettendo che non li hai scritti tu ,ma vuoi una soluzione rapida ed indolore… ho tre trucchi che funzionano al momento:

il primo è settare l’svg iniziale su hw e/o hv, che sono due misure css3 relativamente nuove ma adottate da tutti i browser.

Da 1 a 100 ti misurano la larghezza/altezza della pagina.
quindi 50hw, significa: fammelo metà della grandezza della finestra.
Quindi nel js del grafico, gli vai ad aggiungere:

var svg = d3.select("body").append("svg")
.attr("width", "100hw")
.attr("height", "auto")
.append("g")

ES: http://albero.redup.xyz/bubble/datascuole/index3.html

Se dal tuo browser non funge, fammi sapere che browser e versione è , perchè a me risulta che vada su tutto.

Secondo trick:

Usare le mediaquery e transform:scale(0.5);
Significa fammelo uguale nelle proporzioni, ma grande la metà.
E’ più macchinoso perchè deve decidere tu gli scatti.
es, se hai una svg di 900px per 900px, puoi decidere che sotto i 900px la fai grande la metà , quindi a 450px,
e poi con un’altra media query decidi che sotto i 450px la fai grande un quarto, quindi arrivi a 225px e quindi visualizzabile su tutto.
Se vuoi essere visto anche da browser “arretrati”, ricordati di copiare 3 volte la regola css che gli dai ed aggiungergli i prefissi:
-webkit-transform, -o-transform, -moz-transform
Io lo faccio principalmente principalmente per gli android 4.0 che sono ancora stra diffusi ed usano un webkit vecchio.

es:

@media screen and (max-width: 900px){
svg{
transform:scale(0.5);
-webkit-transform:scale(0.5);
margin: -25%;
}
}
@media screen and (max-width: 450px){
svg{
transform:scale(0.2);
-webkit-transform:scale(0.2);
margin: -70%;

}
#legend:after{content:"torna a visualizzarlo con un PC o scaricalo come pdf";}
}

Terzo paciugo a cui ho pensato ,ma poi non ho applicato perchè mi sembra un po troppo sporco, rimane quindi una ipotesi:
metto un iframe, con dentro uno dei grafici, ma senza regole di viewport nei meta. Quindi verra fatto vedere in miniatura dentro alla sua finestra e sarà possibile zommarlo a mano, come un sito non responsive :P

///////////////

Letture:

https://www.safaribooksonline.com/blog/2014/02/17/building-responsible-visualizations-d3-js/

http://blog.webkid.io/responsive-chart-usability-d3/

http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive

http://eyeseast.github.io/visible-data/2013/08/28/responsive-charts-with-d3/

Open source design

I’m updating owncloud.. waiting to move data directory..

that I thought to change a bit the CSS to coustomize for our brand..

SO I discovered the authors (http://jancborchardt.net/) and, with pleasure, the page of opensource design project.

http://opensourcedesign.net/

Manifest:

http://opensourcedesign.net/about/

http://jancborchardt.net/usability-in-free-software

I think that I want see if I can meet someone of these idea in  FOSDEM..

https://fosdem.org/2016/schedule/track/open_source_design/

… And I discovered also these festival: https://internetfreedomfestival.org/

:D

 

Centrare testo o immagini in viewport con CSS3

l’8 gennaio 2016 è Bert Bos in persona ad aggiornarci su come centrare immagini e testo nelle nostre app in html5.

fonte: https://www.w3.org/Style/Examples/007/center.en.html

Centrare è una azione che si fa spessissimo e che purtroppo non è mai stata banale, da quando hanno deprecato il meraviglioso tag CENTER.

Poi centrare orizzontalmente o verticalmente sono due paia di maniche ben differenti.

Quindo l’uso suggerito dal w3c per centrare in entrambi gli assi è:

<code>

<html>
  <style>
    body {
        background: white }
    section {
        background: black;
        color: white;
        border-radius: 1em;
        padding: 1em;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-right: -50%;
        transform: translate(-50%, -50%) }
  </style>
  <section>
    <h1>Nicely centered</h1>
    <p>This text block is vertically centered.
    <p>Horizontally, too, if the window is wide enough.
  </section>

</code>

e funziona!

 

Storymap/timeline e scroll triggered

Ecco le proposte:

1) http://timeline.knightlab.com/

la più tradizionale

2)https://storymap.knightlab.com/

molto legata al territorio

3)http://cartodb.github.io/odyssey.js/

idem..

4) http://timemapper.okfnlabs.org/okfn/medieval-philosophers#0
anche


Questi sono pacchetti quasi già fatti di codice..

Oppure possiamo prendere ispirazione da questi che però dobbiamo
lavorare di più per ottenerli:

A) http://www.nytimes.com/newsgraphics/2013/10/13/russia/

si snoda verticalmente su un percorso, immaginatelo su una linea del tempo.

B)http://revolt.axismaps.com/map/

ha un PLAY degli eventi storici, che comunque vengono collocati su una
mappa o disegno

C)http://www.nytimes.com/interactive/2014/07/03/world/middleeast/syria-iraq-isis-rogue-state-along-two-rivers.html 
tutto creata sullo scroll dell'utente e la posizione nella mappa in basso a a dx.

TOOL per avere sempre i dati dello scroll della pagina:
http://homepage.ntlworld.com/keir.clarke/web/leafletwaypoint.html

tool singolo:
http://imakewebthings.com/waypoints/