init brutale
This commit is contained in:
commit
9d2023afb9
13 changed files with 414 additions and 0 deletions
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
bower_components/
|
||||
0
.placeholder
Normal file
0
.placeholder
Normal file
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Dataninja.it
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
8
README
Normal file
8
README
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
Progetto didattico per il mini corso su tecnologie web e sviluppo di applicazioni di visualizzazione dati interattive
|
||||
con HTML5, CSS3, d3js, bootstrap e altre librerie open-source. Terzo raduno della comunità Spaghetti Open Data (#SOD15), Bologna, 27-29 marzo 2015.
|
||||
|
||||
Versione: v0.9.0.
|
||||
|
||||
Si ringrazia la Sergio Bonelli Editore per i dati sulla serie Dampyr (e per l'ideazione e produzione della serie stessa).
|
||||
|
||||
Per approfondire: http://www.spaghettiopendata.org/content/dashboard-interattive-javascript-con-d3js.
|
||||
0
README.md
Normal file
0
README.md
Normal file
35
bower.json
Normal file
35
bower.json
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
"name": "SOD3js",
|
||||
"version": "0.2.0",
|
||||
"authors": [
|
||||
"Alessio Cimarelli <jenkin@dataninja.it>"
|
||||
],
|
||||
"description": "Progetto didattico per il mini corso su tecnologie web e sviluppo di applicazioni di visualizzazione dati interattive con HTML5, CSS3, d3js e altre librerie open-source.",
|
||||
"main": "index.html",
|
||||
"keywords": [
|
||||
"d3js",
|
||||
"javascript",
|
||||
"opendata",
|
||||
"sod15",
|
||||
"bologna",
|
||||
"dataninja"
|
||||
],
|
||||
"license": "MIT",
|
||||
"homepage": "http://www.spaghettiopendata.org/content/dashboard-interattive-javascript-con-d3js",
|
||||
"private": true,
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"node_modules",
|
||||
"bower_components",
|
||||
"test",
|
||||
"tests"
|
||||
],
|
||||
"dependencies": {
|
||||
"d3": "~3.5.5",
|
||||
"bootstrap": "~3.3.4",
|
||||
"shufflejs": "~3.1.1",
|
||||
"jquery-ui": "~1.11.4",
|
||||
"underscore": "~1.8.2",
|
||||
"lightbox2": "~2.7.1"
|
||||
}
|
||||
}
|
||||
0
css/.placeholder
Normal file
0
css/.placeholder
Normal file
43
css/main.css
Normal file
43
css/main.css
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
/*
|
||||
* Codice css per l'applicazione
|
||||
*/
|
||||
|
||||
header.page-header {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
header.page-header img {
|
||||
margin-top: 9px;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 50px;
|
||||
border-top-right-radius: 50px;
|
||||
}
|
||||
|
||||
header.page-header nav {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
section.page-body {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div.comics-container {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
height: 350px;
|
||||
}
|
||||
|
||||
article.comics {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
img.cover {
|
||||
max-height: 253px;
|
||||
}
|
||||
|
||||
footer.page-footer,
|
||||
header.page-header {
|
||||
background-color: #3d85b7;
|
||||
}
|
||||
69
data/prodotti.csv
Normal file
69
data/prodotti.csv
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
"Numero" "Prodotto" "Nome" "Descrizione" "Scheda" "Immagine" "Mercati"
|
||||
1 "Fiori" "AZ. Agr. Belletti Donatella (le insolite piante di Donatella)" "Produco fiori eduli, aromatiche e piante diversamente eduli. In contenitore, in pieno campo e li vendo sfusi, in confezione e in mazzetti. Qui si ricicla tutto quel che si puo.
|
||||
" "http://www.sergiobonelli.it/scheda/3568/Il-figlio-del-diavolo.html" "http://www.sergiobonelli.it/resizer/200/-1/true/sIk+uYXy53zVcBgoiF5eHe3OSgwi0czMJP30ghPGreJBBB5J+IR6+Wys++y22xWY--.jpg" "vag"
|
||||
2 "Farine" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas"
|
||||
2 "Frutta" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas"
|
||||
2 "Ortaggi" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas"
|
||||
2 "Uova" "Fabbri Fabrizio" "Azienda Agricola Biologica certificata a conduzione familiare, situata nell'appennino tosco-romagnolo, località San Martino in Gattara, poco distante da Marradi, circondata da boschi, produce verdura Biologica per vocazione da oltre 20 anni, da 9 anni certificata biologica da ICEA, utilizzando come unici ingredienti concime di cavallo, proveniente da azienda Biologica della zona, acqua di una sorgente spontanea presente nel podere e tanta passione." "http://www.sergiobonelli.it/scheda/3569/La-stirpe-della-notte.html" "http://www.sergiobonelli.it/resizer/200/-1/true/N25Qi5fhXWi3eP1WUxV3zc4Oageux3y3wk5xIQ8VaS1aA5K802J4ZaepFXWUfdbz--.jpg" "labas"
|
||||
3 "Farine" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag"
|
||||
3 "Frutta" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag"
|
||||
3 "Ortaggi" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag"
|
||||
3 "Vino" "Azienda agricola Ranch Rovere di Berto Emilio" "L'Azienda agricola Ranch Rovere produce grani antichi,farro,favino,prodotti da orto biologico." "http://www.sergiobonelli.it/scheda/3570/Fantasmi-di-sabbia.html" "http://www.sergiobonelli.it/resizer/200/-1/true/A1NU5LQabDn7lFUXELnCgGsm2e8ZuNby26vDBekBYmbYdUYpSGpHQ1+a7rTW/azo--.jpg" "vag"
|
||||
4 "Cereali da Granella" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
4 "Conserve" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
4 "Farine" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
4 "Frutta" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
4 "Ortaggi" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
4 "Prodotti da forno" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
4 "Succhi" "Azienda Agricola Rota Paolo" "L'azienda nasce alla fine degli anni ’70, dall' ’89 convertita al biologico. La coltivazione prevalente del pomodoro da conserva è via via integrata da altri ortaggi, fino a raggiungere la attuale dimensione di superficie coltivata. Attualmente il podere comprende: 2 ha di ortaggi, 2ha di vigneto, 6ha sono occupati da frumento e erba medica per permettere la rotazione. Abbiamo anche un piccolo frutteto e una serra.
|
||||
Lavoriamo il terreno secondo le metodologie tradizionali; semina, zappatura, diserbo, raccolta, sono manuali e in parte attuati con mezzi meccanici di basso impatto ambientale. Gli ortaggi, raccolti quotidianamente vengono venduti in azienda e in mercati contadini.
|
||||
Particolare attenzione, da sempre, rivolgiamo alla salute della terra e alla salvaguardia dell'ambiente.
|
||||
Questo sistema di lavoro richiede notevole energia, fatica, presenta maggiori rischi e rese sicuramente inferiori rispetto all'agricoltura convenzionale. Siamo sostenuti in tale scelta da una motivazione etica e confortati dalla crescente simpatia e sostegno che gli affezionati clienti non mancano di manifestarci.
|
||||
|
||||
" "http://www.sergiobonelli.it/scheda/3571/Notturno-in-rosso.html" "http://www.sergiobonelli.it/resizer/200/-1/true/zcVYnplgPUzm7bwE/57Hz8jZ9sNKsMGi5EiQZ7QwKqJO6xrB6O82FOmxv1Umo/e6--.jpg" "vag"
|
||||
5 "Frutta" "Az.Agr. Biodinamica ""Il Serraglio"" s.s." "Azienda a ciclo chiuso , produzione di cereali e sfarinati sia ad uso umano che animale, frutta (mele - pere - pesche), ortaggi, carne bovina, presenza di un ristorante agrituristico e B & B di prossima apertura,didattica e attività di laboratorio, percorsi naturalistici." "http://www.sergiobonelli.it/scheda/3572/Sotto-il-ponte-di-pietra.html" "http://www.sergiobonelli.it/resizer/200/-1/true/evBuoKUANzV3iijFMX+eGih4BztE7o3CEDnC8racfDCi0ja+P/PV280q1BCriiib--.jpg" "xm24"
|
||||
5 "Miele" "Az.Agr. Biodinamica ""Il Serraglio"" s.s." "Azienda a ciclo chiuso , produzione di cereali e sfarinati sia ad uso umano che animale, frutta (mele - pere - pesche), ortaggi, carne bovina, presenza di un ristorante agrituristico e B & B di prossima apertura,didattica e attività di laboratorio, percorsi naturalistici." "http://www.sergiobonelli.it/scheda/3572/Sotto-il-ponte-di-pietra.html" "http://www.sergiobonelli.it/resizer/200/-1/true/evBuoKUANzV3iijFMX+eGih4BztE7o3CEDnC8racfDCi0ja+P/PV280q1BCriiib--.jpg" "xm24"
|
||||
5 "Succhi" "Az.Agr. Biodinamica ""Il Serraglio"" s.s." "Azienda a ciclo chiuso , produzione di cereali e sfarinati sia ad uso umano che animale, frutta (mele - pere - pesche), ortaggi, carne bovina, presenza di un ristorante agrituristico e B & B di prossima apertura,didattica e attività di laboratorio, percorsi naturalistici." "http://www.sergiobonelli.it/scheda/3572/Sotto-il-ponte-di-pietra.html" "http://www.sergiobonelli.it/resizer/200/-1/true/evBuoKUANzV3iijFMX+eGih4BztE7o3CEDnC8racfDCi0ja+P/PV280q1BCriiib--.jpg" "xm24"
|
||||
6 "Frutta" "Pina e Leo" "Produciamo principalmente miele.Io(Pina)mi sono avvicinata al mondo contadino nel 2009 dopo una laurea triennale in scienze sociali. Mi sembrava assurdo saper utilizzare un pc e non aver mai piantato un pomodoro,non saper più riconoscere una pianta velenosa da una che cura,calpestare buonissime erbe mangerecce,quale legna usare per dei manici o dei recinti..non volevo sfruttare nè essere sfruttata,gli animali selvatici come tutto il resto li avevo visti nei libri così ho conosciuto Leonardo e altre/i con cui vivere con la tendenza all' autosufficienza.Per avere un po di miele per noi,nel 2009,su spinta di un amico (ora apicoltore GC) ci procurammo una famiglia d api visitata collettivamente;le api che abbiamo adesso provengono tutte da quella li,il secondo anno ne avevamo 3,poi cinque..
|
||||
Leonardo,invece,lui voleva fare il contadino già da piccolo.Ha avuto modo di frequentare la campagna andando dai suoi nonni paterni che erano operai agricoli(prima mezzadri) e fin da piccolissimo era appassionato di animali e alberi ma viveva in paese cosi dai 4anni metteva da parte i semi e faceva crescere gli alberi che poi piantava e seguiva.Non solo frutti,cipressi querce e anche un ippocastano.
|
||||
Dal 2001 ha partecipato,insieme a Brigitte Holsen, a una ricerca con fondi UE sui frutti dimenticati nelle zone di Mugello,AltoMugello e Valdisieve con iscrizione ARSIA di alcune cultivar ritrovate." "http://www.sergiobonelli.it/scheda/3573/La-costa-degli-scheletri.html" "http://www.sergiobonelli.it/resizer/200/-1/true/L0E0g3Nfzgehcs6SzCAqilKesvEfJ5YCelpE7yb4DhTkEOszMNb2HaBSlC/IL3aJ--.jpg" "vag"
|
||||
6 "Ortaggi" "Pina e Leo" "Produciamo principalmente miele.Io(Pina)mi sono avvicinata al mondo contadino nel 2009 dopo una laurea triennale in scienze sociali. Mi sembrava assurdo saper utilizzare un pc e non aver mai piantato un pomodoro,non saper più riconoscere una pianta velenosa da una che cura,calpestare buonissime erbe mangerecce,quale legna usare per dei manici o dei recinti..non volevo sfruttare nè essere sfruttata,gli animali selvatici come tutto il resto li avevo visti nei libri così ho conosciuto Leonardo e altre/i con cui vivere con la tendenza all' autosufficienza.Per avere un po di miele per noi,nel 2009,su spinta di un amico (ora apicoltore GC) ci procurammo una famiglia d api visitata collettivamente;le api che abbiamo adesso provengono tutte da quella li,il secondo anno ne avevamo 3,poi cinque..
|
||||
Leonardo,invece,lui voleva fare il contadino già da piccolo.Ha avuto modo di frequentare la campagna andando dai suoi nonni paterni che erano operai agricoli(prima mezzadri) e fin da piccolissimo era appassionato di animali e alberi ma viveva in paese cosi dai 4anni metteva da parte i semi e faceva crescere gli alberi che poi piantava e seguiva.Non solo frutti,cipressi querce e anche un ippocastano.
|
||||
Dal 2001 ha partecipato,insieme a Brigitte Holsen, a una ricerca con fondi UE sui frutti dimenticati nelle zone di Mugello,AltoMugello e Valdisieve con iscrizione ARSIA di alcune cultivar ritrovate." "http://www.sergiobonelli.it/scheda/3573/La-costa-degli-scheletri.html" "http://www.sergiobonelli.it/resizer/200/-1/true/L0E0g3Nfzgehcs6SzCAqilKesvEfJ5YCelpE7yb4DhTkEOszMNb2HaBSlC/IL3aJ--.jpg" "vag"
|
||||
6 "Uova" "Pina e Leo" "Produciamo principalmente miele.Io(Pina)mi sono avvicinata al mondo contadino nel 2009 dopo una laurea triennale in scienze sociali. Mi sembrava assurdo saper utilizzare un pc e non aver mai piantato un pomodoro,non saper più riconoscere una pianta velenosa da una che cura,calpestare buonissime erbe mangerecce,quale legna usare per dei manici o dei recinti..non volevo sfruttare nè essere sfruttata,gli animali selvatici come tutto il resto li avevo visti nei libri così ho conosciuto Leonardo e altre/i con cui vivere con la tendenza all' autosufficienza.Per avere un po di miele per noi,nel 2009,su spinta di un amico (ora apicoltore GC) ci procurammo una famiglia d api visitata collettivamente;le api che abbiamo adesso provengono tutte da quella li,il secondo anno ne avevamo 3,poi cinque..
|
||||
Leonardo,invece,lui voleva fare il contadino già da piccolo.Ha avuto modo di frequentare la campagna andando dai suoi nonni paterni che erano operai agricoli(prima mezzadri) e fin da piccolissimo era appassionato di animali e alberi ma viveva in paese cosi dai 4anni metteva da parte i semi e faceva crescere gli alberi che poi piantava e seguiva.Non solo frutti,cipressi querce e anche un ippocastano.
|
||||
Dal 2001 ha partecipato,insieme a Brigitte Holsen, a una ricerca con fondi UE sui frutti dimenticati nelle zone di Mugello,AltoMugello e Valdisieve con iscrizione ARSIA di alcune cultivar ritrovate." "http://www.sergiobonelli.it/scheda/3573/La-costa-degli-scheletri.html" "http://www.sergiobonelli.it/resizer/200/-1/true/L0E0g3Nfzgehcs6SzCAqilKesvEfJ5YCelpE7yb4DhTkEOszMNb2HaBSlC/IL3aJ--.jpg" "vag"
|
||||
8 "Miele" "semprenuoveali" "Ho iniziato nel 2000 con un paio di arnie e sono arrivato a quelle che ho oggi facendo riprodurre le mie prime famiglie.
|
||||
Lavoro da sempre secondo i criteri minimi dell'apicoltura biologica ma per scelta non ho nessuna certificazione perché non credo nella delega e preferisco la garanzia diretta nel rapporto di conoscenza produttore-consumatore.
|
||||
Ad oggi non ho mai nutrito le mie famiglie di api ed utilizzo esclusivamente cera proveniente dai miei alveari.
|
||||
Cerco di differenziare il più possibile le tipologie dei mieli raccolti perchè credo sia il modo migliore per valorizzare il lavoro che le mie api svolgono in natura e perché penso che questo rifletta maggiormente quella che è la biodiversità dei luoghi in cui le api bottinano il miele." "http://www.sergiobonelli.it/scheda/3575/Dalle-tenebre.html" "http://www.sergiobonelli.it/resizer/200/-1/true/0AmTu7lEuW9ZannmYOZ6qnfGPUTnG7PPQ/Z/bkxuNIlP7Q+m1gQIAOmcjOrau8Ai--.jpg" "labas"
|
||||
|
0
fonts/.placeholder
Normal file
0
fonts/.placeholder
Normal file
0
images/.placeholder
Normal file
0
images/.placeholder
Normal file
27
index.html
Normal file
27
index.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<title>Spaghetti Open Data / Dataninja - Tecnologie web e visualizzazione dati interattiva - Raw Data Now!</title>
|
||||
|
||||
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
|
||||
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
|
||||
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="bower_components/jquery-ui/jquery-ui.min.js"></script>
|
||||
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" src="bower_components/lightbox2/js//lightbox.min.js"></script>
|
||||
<script type="text/javascript" src="bower_components/shufflejs/dist/jquery.shuffle.modernizr.min.js"></script>
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
|
||||
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="bower_components/jquery-ui/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
|
||||
<link href="bower_components/lightbox2/css/lightbox.css" rel="stylesheet">
|
||||
<link href="css/main.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
210
js/main.js
Normal file
210
js/main.js
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
/*
|
||||
* Codice javascript per l'applicazione
|
||||
*/
|
||||
|
||||
// All'interno del file index.html il luogo migliore per inserire ed eseguire il codice javascript
|
||||
// è l'header della pagina, all'interno del tag <head>. Ma effettuare subito operazioni sul DOM all'interno
|
||||
// del tag <body> prima ancora che sia caricato interamente non è una buona idea...
|
||||
//
|
||||
// Inseriamo quindi tutto il codice in una funzione di callback e passiamola come argomento alla funzione speciale di jQuery, "$()".
|
||||
// La nostra funzione sarà così eseguita automaticamente non appena il caricamento della pagina sarà completato
|
||||
// e il DOM pronto per essere manipolato.
|
||||
//
|
||||
$(function() {
|
||||
|
||||
// La libreria d3 espone un oggetto accessibile globalmente: d3.
|
||||
// L'uso della libreria d3 richiede quindi l'esecuzione opportuna dei metodi dell'oggetto d3.
|
||||
//
|
||||
// In questo caso il metodo select([selettore]) seleziona l'elemento in base al selettore passato ("body")
|
||||
// e ritorna un oggetto "selezione" (assegnato alla variabile "container").
|
||||
//
|
||||
// Una selezione d3 a sua volta possiede il metodo append([tag]) che crea un nuovo
|
||||
// nodo del tipo specificato ("div") nel DOM all'interno del nodo selezionato in precedenza ("body").
|
||||
//
|
||||
// Anche append() torna una selezione (questa volta "div", non più "body"),
|
||||
// per cui è possibile accedere immediatamente al metodo attr([string],[string])
|
||||
// sfruttando un pattern di programmazione noto con il nome di chaining. La stringa passata come secondo argomento
|
||||
// ("container-fluid") viene dunque inserita come classe all'interno dell'attributo "class" del nodo selezionato ("div").
|
||||
//
|
||||
// Creiamo subito un contenitore della pagina, figlio del body per usare al meglio bootstrap.
|
||||
//
|
||||
var container = d3.select("body")
|
||||
.append("div")
|
||||
.attr("class","container-fluid");
|
||||
|
||||
// Inseriamo il titolo in un contenitore che funga da "header" con classe "row", sempre per sfruttare bootstrap.
|
||||
var header = container.append("header") // Definiamo semanticamente le parti della pagina con i nuovi tag dell'HTML5
|
||||
.attr("class","row page-header");
|
||||
|
||||
// Rendiamo il tutto ricercabile mediante shufflejs attraverso un campo di input testuale
|
||||
header.append("nav")
|
||||
.append("input")
|
||||
.attr("id","search")
|
||||
.attr("class","center-block input-lg")
|
||||
.attr("placeholder","Cerca per produttore, mercato o prodotto")
|
||||
.attr("value","");
|
||||
|
||||
// Abbiamo ora bisogno di dati memorizzati in un file tsv (Tab-separated values),
|
||||
// per cui dobbiamo recuperarli con una chiamata AJAX. Il metodo tsv([url], callback) di d3
|
||||
// pensa a tutto: chiamata asincrona, gestione della risposta (evetuali errori in "error" e parsing dei dati testuali
|
||||
// dal tsv a un array di oggetti (passato in "data").
|
||||
//
|
||||
d3.tsv("data/prodotti.csv", function(error, data) {
|
||||
|
||||
// Gestione di eventuali errori (es. file non trovato, ecc.),
|
||||
// se c'è qualche problema l'esecuzione si blocca e viene notificato un messaggio in console.
|
||||
if (error) {
|
||||
throw "Error in loading data...";
|
||||
}
|
||||
|
||||
// Assicuriamoci che tutto sia ordinato per numero di albo (e quindi per data di uscita)
|
||||
// e per ora limitiamoci ai primi 20 albi per non sovraccaricare di richieste il server della Bonelli
|
||||
// (le immagini sono linkate direttamente dal sito ufficiale).
|
||||
//
|
||||
/*data = data.sort(function(a,b) { // Il metodo sort() passa alla callback una coppia di elementi
|
||||
// Bisogna indicare dei due elementi quale viene prima e quale dopo,
|
||||
// in questo ci aiuta un metodo di d3 già predisposto allo scopo per semplici ordinamenti.
|
||||
//
|
||||
// Ovviamente dobbiamo confrontare il valore degli attributi "Numero" degli oggetti "a" e "b" e non gli oggetti in sé
|
||||
// e prima di farlo li convertiamo a interi (inizialmente sono letti come stringhe) anteponendo un "+".
|
||||
return d3.ascending(+a["Numero"],+b["Numero"]);
|
||||
}).slice(0,20); // Il metodo slice() applicato a un array prende 20 elementi consecutivi a partire dal numero 0 (il primo)
|
||||
*/
|
||||
// Per aggiungere la funzionalità di autocomplete al form di ricerca,
|
||||
// ricaviamo la lista dei nomi di tutti gli autori degli albi.
|
||||
// Soggetto Sceneggiatura Disegni Copertina
|
||||
var authors = _.uniq(_.flatten(data.map(function(el) {
|
||||
var groups = [];
|
||||
return groups
|
||||
.concat(el["Nome"].split(","))
|
||||
.concat(el["Prodotto"].split(","))
|
||||
.concat(el["Mercati"].split(","));
|
||||
})));
|
||||
|
||||
// Qui uno dei pilastri concettuali della libreria d3:
|
||||
// prendiamo la variabile container (è una selezione del div contenitore globale), poi selezioniamo tutti gli elementi "div"
|
||||
// in esso contenuti con il metodo selectAll([selettore]).
|
||||
// Inizialmente non ce ne sono, quindi la selezione è vuota, ma esiste.
|
||||
//
|
||||
// A questa selezione (vuota) associamo il nostro array per posizione con il metodo data([array]):
|
||||
// il primo oggetto con il primo div (che non esiste),
|
||||
// il secondo oggetto con il secondo div (che sempre non esiste), ecc.
|
||||
//
|
||||
// Il metodo enter() opera la magia: esegue tutto ciò che viene dopo tante volte quanti sono i dati
|
||||
// che non sono stati assegnati ad alcun elemento del DOM, nel nostro caso tutti. Per cui append("div")
|
||||
// viene eseguito per tutti i dati e così vengono creati nel DOM tanti paragrafi quanti sono i dati
|
||||
// e a essi vengono associati in ordine i dati uno a uno.
|
||||
//
|
||||
// Il metodo append("div") torna una selezione, per cui possiamo subito impostare gli attributi e i contenuti dei div,
|
||||
// che non sono fissi, ma dipendono dai dati: la funzione di callback, infatti, viene eseguita passandole
|
||||
// il dato associato all'elemento corrente: "d" è un oggetto che rappresenta una riga del dataset originario
|
||||
// (una riga del file tsv), con le chiavi uguali ai nomi delle colonne e i valori quelli delle celle della riga.
|
||||
//
|
||||
// Questa funzione di callback deve ritornare un valore compatibile con il metodo che l'ha chiamata: nel nostro caso
|
||||
// per lo più stringhe con cui valorizzare gli attributi nominati.
|
||||
//
|
||||
var albi = container.append("section")
|
||||
.attr("id","grid")
|
||||
.attr("class","row page-body") // Dopo l'header, un'altra "row", ma con classe "body"
|
||||
.selectAll("div") // La selezione dei "div" contenitori viene assegnata alla variabile "albi" e poi riutilizzata successivamente.
|
||||
.data(data)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class","comics-container col-lg-2 col-md-3 col-sm-4 col-xs-6") // Associamo una classe ai div contenitori degli albi per sfruttare la grid di bootstrap che ci assicura la responsiveness
|
||||
.attr("data-groups", function(d) { // Shufflejs effettua il filtro su categorie personalizzate che vanno definite nell'attributo data-groups
|
||||
var groups = [];
|
||||
// Nel nostro caso le categorie sono i nomi degli autori e devono comparire come json di un array di stringhe: ["nome1","nome2",...]
|
||||
// Sappiamo però che nelle nostre colonne ci possono essere più nomi, che divideremo in un array con split() usando la virgola come separatore.
|
||||
// Non possiamo tornare però un array, perché l'attributo si aspetta una stringa, per cui... stringify, non prima di aver eliminato dall'array
|
||||
// gli elementi duplicati.
|
||||
return JSON.stringify(_.uniq(groups.concat(d["Nome"].split(",")).concat(d["Prodotto"].split(",")).concat(d["Mercati"].split(",")))).replace(/"/g,"'");
|
||||
})
|
||||
.attr("data-title", function(d) { // Perché allora non inserire tutte e informazioni negli attributi data-?
|
||||
return d["Prodotto"].replace(/"/g,"");
|
||||
})
|
||||
.attr("data-summary", function(d) {
|
||||
return d["Nome"].replace(/"/g,"");
|
||||
})
|
||||
.append("article") // Perché due div uno dentro l'altro? Perché vogliamo il bordo di ogni elemento e una certa distanza tra l'uno e l'altro
|
||||
.attr("class","comics");
|
||||
|
||||
// Da qui in poi tutti gli elementi vanno creati all'interno dei div contenitori creati precedentemente.
|
||||
// La variabile "albi" è un array e tutti i metodi invocati si applicano a tutti gli elementi dell'array.
|
||||
// Noi lo scriviamo una sola volta, ma il tutto è eseguito per tutti gli elementi, tanti quanti sono i dati.
|
||||
var header_albi = albi.append("header");
|
||||
|
||||
header_albi.append("p")
|
||||
.attr("class","number")
|
||||
.text(function(d) {
|
||||
return "Dampyr n. "+d["Numero"]; // Concatenazione di stringhe, sempre con il "+".
|
||||
});
|
||||
|
||||
header_albi.append("h4") // Titolo di quarto livello, sempre figlio del div, ma fratello del paragrafo precedente
|
||||
.attr("class","title")
|
||||
.text(function(d) {
|
||||
return d["Prodotto"];
|
||||
});
|
||||
|
||||
albi.append("figure")
|
||||
.append("a") // Questa volta inseriamo nel DOM un link alla scheda dell'albo sul sito ufficiale
|
||||
.attr("href", function(d) { // L'URL del link va inserita nell'attributo "href" mediante il metodo "attr"
|
||||
return d["Immagine"];
|
||||
//return d["Scheda"];
|
||||
})
|
||||
.attr("target","_blank") // Il link si apre in un'altra finestra
|
||||
.attr("data-lightbox","cover")
|
||||
.attr("data-title", function(d) {
|
||||
return d["Descrizione"].replace(/"/g,"");
|
||||
})
|
||||
.append("img") // Ora l'append è consecutivo al precedente, quindi agisce su "a" (non su "div"), inserendo al suo interno un'immagine
|
||||
.attr("class","cover img-responsive center-block") // Associamo la classe "cover" e alcune classi utili definite da bootstrap
|
||||
.attr("src", function(d) { // La sua URL va inserita nell'attributo "src" mediante il metodo "attr"
|
||||
return d["Immagine"];
|
||||
})
|
||||
.attr("alt", function(d) {
|
||||
return d["Nome"];
|
||||
});
|
||||
|
||||
albi.append("footer")
|
||||
.append("p")
|
||||
.attr("class","date")
|
||||
.html(function(d) {
|
||||
return 'Uscito il <a href="'+d["Scheda"]+'" target="_blank">'+"Link scheda"+'</a>';
|
||||
});
|
||||
|
||||
// E infine un footer a chiudere la pagina
|
||||
container.append("footer")
|
||||
.attr("class","row page-footer")
|
||||
.append("figure")
|
||||
.append("a")
|
||||
.attr("href","http://www.campiaperti.org/")
|
||||
.attr("target","_blank");
|
||||
|
||||
//
|
||||
// Il DOM è pronto con tutti gli elementi
|
||||
// Ora possiamo agire su quegli elementi, inizializzando la grid dei comics con shufflejs
|
||||
//
|
||||
$("#grid").shuffle({
|
||||
itemSelector: ".comics-container"
|
||||
});
|
||||
|
||||
// Attacchiamo una funzione di callback a un evento del form di input: viene eseguita ogni volta che il contenuto cambia
|
||||
// a causa della digitazione di un testo all'interno da parte dell'utente
|
||||
$("#search").on('keyup change', function() { // Eventi "rilascio di un pulsante della tastiera" e "cambio del contenuto"
|
||||
// Effettuando una ricerca in data-groups è necessario ripulire un po' sia le stringa di ricerca
|
||||
// (ignorando per esempio le maiuscole e altri caratteri non letterali) che quella in cui viene effettuata
|
||||
// la ricerca (che è il json di un array di stringhe)
|
||||
var val = this.value.toLowerCase().replace(/[^a-z] /g,""); // Il valore digitato corrente
|
||||
$('#grid').shuffle('shuffle', function($el, shuffle) {
|
||||
// La funzione viene valutata per ogni elemento della grid:
|
||||
// se vera l'elemento viene tenuto, altrimenti viene nascosto
|
||||
return $el.data('groups').toLowerCase().indexOf(val) > -1;
|
||||
});
|
||||
});
|
||||
|
||||
$("#search").autocomplete({
|
||||
source: authors
|
||||
});
|
||||
|
||||
});
|
||||
});
|
||||
Loading…
Reference in a new issue