All posts by kiki

Uncategorized

one page scrolling- parallax effect – css3 transform- sketch elements, pattern e video background

Parole chiave sulla cresta dell’onda o sullo spigolo sanguinante del web designer aggiornato.
Ricordiamoci che ricalca una tecnica degli anni venti/trenta che ha avuto molta fortuna http://en.wikipedia.org/wiki/Parallax_scrolling
Dopo meno di anno dall’apparizione dei plugin di JS per farlo, nel web ce n’è per tutti i gusti!! http://news.softpedia.com/news/Script-of-the-Day-Parallax-js-388592.shtml
ABBONDANTE: http://makeyourmoneymatter.org/
SEMPLICE: http://www.expresssolicitors.com/assets/nhs-payout-timeline.html
STILOSA: http://cyclemon.com/
VIDEO: http://www.ridebarstow.com/
SKETCH: http://www.legworkstudio.com/
PARALLASSuper:
COMICS: http://www.cabletv.com/the-walking-dead
ROMANTICO: http://thesearethings.com/
TECNICO: http://adcade.com/
INFOGRAFICAPERSONALE: http://www.ionz.com.br/
DISEGNI: www.vespillo-lefilm.com/
SPAZIALE: http://www.intacto10years.com/index_start.php
FICO: http://www.iutopi.com/

fonti: http://www.delex-ws.it/blog/sviluppo-web/parallax-scrolling-il-caso-di-walking-dead/ http://www.bittbox.com/all/20-websites-with-unique-interactive-scrolling http://blog.ideabit.com/web_design/articolo_332.htm http://www.marchettidesign.net/2013/11/barstow-analisi-del-sito-e-della-struttura-video-one-page-scroll/

Anche se a me piace di più usata con moderazione :

FONTE: http://www.romancortes.com/blog/css-3d-meninas/

data jornalism, html5, jquery UI, JS, SoftwareLibero

Grafici interattivi

Aggiornamento 2:
tool grafici
http://infogr.am
http://live.amcharts.com/
http://www-958.ibm.com/software/analytics/manyeyes/
https://www.draw.io/
Aggiornamebto:
Con questo il New York times si è vinto un premio:
http://www.nytimes.com/2013/07/22/business/in-climbing-income-ladder-location-matters.html?_r=2&

 
eccone uno davvero bello !
http://www.nytimes.com/interactive/2011/10/23/sunday-review/an-overview-of-the-euro-crisis.html?_r=0
http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html?_r=0#God
Strumenti utilizzati:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://graphics8.nytimes.com/packages/js/newsgraphics/2011/1020-debt/raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://graphics8.nytimes.com/packages/js/newsgraphics/2011/1020-debt/underscore-min.js" type="text/javascript" charset="utf-8"></script>
Ovvero:
Devo dire che quest’ultimo non lo conoscevo 🙂 ma credo che sia funzionale a http://www.documentcloud.org/ e non alla creazione del grafico in se.
Quindi il grafico viene creato e disegnato in SVG dentro a un riquadro canvas con Raphael e poi si passa da uno all’altro utilizzando il semplice metodo delle tab di jquery:
E quindi il segreto delgrafico è tutto qua: nelle indicazioni di quel che deve fare il canvas.. e nel JS che lo anima:
esercizi, html5, jquery mobile, jquery UI

Drag&Drop .. su jquery mobile?!?!

[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/drag.html” width=”600″ height=”480″]
BH.. uno passa da jquery UI a jquery mobile… e… scopre che si pestano i piedi a vicenda!
Hanno entrambi la stessa dipendenza da jquery 1.9 ma costruiscono due USER INTERFACE differenti.
JQ mobile usa dei tag html non standard e questo mi lascia un po perplessa.. anche il mio IDE è dello stesso parere 😉
Ecco il meglio che ho accrocchiato per mantenere il drag&drop anche in jquery mobile, però usando jqueri UI, ma senza i fogli di stile.. brr che impasto..
suggerimenti?
Sembra carino e pare pure che funzioni…
AHH altra pecca.. pensavo che jquery mobile racchiudesse già i plugin per il touch ed immagino sia sicuramente così…
tranne… per i drag&drop.. quindi ho dovuto aggiungere:
/*
* jQuery UI Touch Punch 0.2.2
*
* Copyright 2011, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
*  jquery.ui.widget.js
*  jquery.ui.mouse.js
*/
 

html5, jquery mobile, JS

Grid responsive!!

Eddai! sembra un ossimoro, no? però devo dire che funzionano benino una volta capite.. ne parlavo quanche tempo fa in un post.. ovvero il fatto che le tabelle/griglie sono superate dall’html3.. ma ce le troviamo riapparire nell’html5.. come mai? perchè hanno un significato semantico.
Alcune cose non avrebbero lo stesso significato se non fossero rappresentate secondo una tabella. E questa non è una semplice scelta stilistica da racchiudere nei fogli di stile, ma è SIGNIFICATO e come tale deve essere nell’html, in modo che se la pagina viene vista solo come CONTENUTI, in ogni modo il messaggio viene trasmesso..
ovvero?!?!?!esempio in un comunissimo questionario Vero e FAlso o delle domande a risp multipla. Se i radio e check box, ovvero i quadratini o rotondini dove potete clikkare e spuntare la risposta non sono in qualche modo “associati” alla domanda..
iframe 600pxX480px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”600″ height=”480″]
come si fa?!?!
Se nel fare una pagina responsive.. poi a prima vista non riesco più a ricondurre quale risposte appartengono a quale domande…CAvolo!! Chissenefrega che è responsive.. non è più utilizzabile! Quindi veniamo alla pratica..
Da una settimana sto litigando con jquerymobile.. rimando ad un altro post le mie prime impressioni HARGGGHH!!!
Quindi se vogliamo una griglia responsive di due colonne sarà così
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
<div>
<div><div>a. Lucia invita Marco e suo figlio a una festa di compleanno</div></div>
<div><div><fieldset data-role=”controlgroup” data-type=”horizontal”>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2a” >
<label for=”radio-choice-h-2a”>Vero</label>
<input type=”radio” name=”radio-choice-h-2″ id=”radio-choice-h-2b” >
<label for=”radio-choice-h-2b”>Falso</label>
</fieldset></div></div>
</div>
Ma in questo modo .. la tabella c’è e si vede!
a voi la scelta!
iframe 300pxX450px
[iframe src=”http://carnevali.lilithstudio.it/jq-mobile/grid01.html” width=”300″ height=”480″]

Uncategorized

Iframe grafico a bolle

grazie alla libreria js D3 http://d3js.org/ è possibile creare splendidi grafici.
Qui un esempio in iframe:
E’ come una finestra su un’altra pagina html, con i proprio codice javascript e librerie.
Quindi non è una immagine, ma è un GRAFICO INTERATTIVO:
clikkare per credere!
[iframe src=”http://open.dataninja.it/wp-content/uploads/app/datascuoleinfanzia/” height=”600″ width=”600″ ]

App, cordova, phonegap

Quando PHONEGAP non era ancora 3

Quando lo installai io feci così:
1) mi scaricai:
phonegap-2.9.0.zip
node-v0.10.12.pkg
android-sdk_r22.0.1-macosx.zip
2) spacchettai ed aprii un terminale
3) seguii la guida:
A http://docs.phonegap.com/en/edge/guide_platforms_android_index.md.html#Android%20Platform%20Guide
B http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-Line%20Interface
e tutto andò liscio!
OK, ora riproviamo a rifare tutto 🙂

Uncategorized

Mac burst pdf – ovvero dividimi in pagine un doc pdf su Mac

Allora loro vorrebbero 8 euro e qualcosa…
https://itunes.apple.com/it/app/pdf-splitter/id449436131?mt=12
invece
è facilissimo!!

How To Split PDF Documents Into Single Pages Using Mac OS X


ovvero:
prendi il tuo pdf, invece di aprirlo con acrobat aprilo con Anteprima, pigia il pusante in alto a sn che dice anteprime,
e da lì ti trascini in una nuova cartella di finder le pagine che necessiti.
FATTO
FINITO
VAi a FARLO ora

e-learning, html5, Uncategorized

Pubblicato Catalogo sfogliabile per tablet

Finalmente vedo pubblicata nel web una realizzazione tecnica TUTTA mia! in HTML5, CSS3 e JS

CATALOGO DIGITALE IDA

è ottimizzata per la visualizzazione su tablet e desktop, è responsive, ha una navigazione multipla:
– menu, – sfogliata touch, -frecce della tastiera, -al click
Non avete idea del sistema di fallback necessario per gestire le trasformazioni 3d dei CSS3 che non sono ben supportate..
Ovvero.. Firefox una pacchia, Safari bene, ma comincia a distanziarsi da Chrome e ti tocca fare tutto due volte.. e poi IE..
macchevvelodico affare!
Su IE dove non c’è possibilità di spostare nulla in 3d e qundi bisogna trasformare tutto in immagini scorribili.
hehehe.
Vi do un assaggio usando un iframe:
(attenzione, la navigazione è limitata ai primi 800px)
[iframe src=”http://www.edizionilalinea.it/ida/index.html” width=”600″ height=”800″]