[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
*/
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″]
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″ ]
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 🙂
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!!
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
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″]
contenzioso con apple.. ultima sul 9 dic
http://www.melablog.it/post/17785/cartello-sugli-ebook-3-ai-clienti-per-ogni-libro-venduto-su-ibookstore
http://www.sns.it/servizi/iniziativescuole/anniprecedenti/20132014/centomila/
http://universomamma.it/le-ultimissime-app-per-bambini-anche-i-libri-diventano-digitali/
https://www.facebook.com/notes/agostino-quadrino/libri-di-testo-e-innovazione-digitale-il-mondo-come-volont%C3%A0-e-rappresentazione/10151647314181735
http://www.robertosconocchini.it/dispositivi-mobili/3023-le-migliori-applicazioni-didattiche-per-lipad.html
http://www.robertosconocchini.it/dispositivi-mobili/3102-con-samsung-laula-diventa-completamente-interattiva-smart-school.html
http://noa.bibienne.net/
opinione di luna http://www.ilpost.it/riccardoluna/2013/10/16/editori-studenti-banda-larga-e-apple-una-intervista-molto-lunga-alla-carrozza/
altro sul convegno apisa http://noa.bibienne.net/2013/10/30/convegno-pisa-9-novembre/
Pubblicato Grafico interattivo
In seguito al workshop sul data journalism a Bologna,
insieme a delle ostinate giornaliste, che hanno cercato, decifrato ed ordinato i dati,
trovo pubblicata la mia realizzazione digitale:
http://open.dataninja.it/bologna/?p=27&preview=true
Non quella in flash a metà articolo 😉
ma il “bellissimo” grafico a bolle che ha una foto nel titolo e poi lo trovate a fondo pagina!
Grazie a Dataninja.it, che sono gli esperti italiani nel settore,
all’agenda digitale che ha messo a disposizioni i fondi e a Server donne che mi ha avvisato dell’appuntamento ;D
Didattica Aperta!
Italian Linux Society e’ lieta di supportare l’edizione 2013 di Didattica
Aperta, annuale conferenza sul software libero a scuola che quest’anno si
terra’ sabato 16 novembre a Ivrea (TO).
La manifestazione di quest’anno presenta un ampio programma con tutti i
protagonisti della didattica libera e condivisa del nostro Paese: tra gli
altri il progetto WiiLDOS (che, oltre ad una sempre maggiormente popolare
distribuzione GNU/Linux per la scuola, aggrega una delle piu’ grandi
comunita’ di docenti freesoftware in Italia), i referenti di Porte Aperte sul
Web (grande opera di supporto e sviluppo di strumenti online, rigorosamente
opensource, per le scuole), e gli interventi di Renzo Davoli e Norberto
Patrignani, professori di alto profilo ben noti al pubblico anche oltre i
confini dell’universo Linux.
Come sempre l’evento cerca di fare il punto sul rapporto tra tecnologia ed
insegnamento, evidenziando come il software ed i contenuti liberi non siano
solo strumenti educativi ma essi stessi stimolo alla partecipazione, alla
collaborazione, allo scambio, alla creativita’. Un appuntamento importante
per andare oltre una visione superficiale ed incompleta dell’innovazione
della scuola, fatta di tablet e LIM da continuare ad usare per la fruizione
passiva dei materiali, e per rimettere in discussione i fondamenti stessi
della didattica, che dalla tecnologia dovrebbe essere potenziata anziche’
vincolata.
Appuntamento dunque ad Ivrea, sabato 16 novembre. Invitati soprattutto gli
insegnanti, e tutti coloro che desiderano capire (e costruire) una nuova
scuola per i nostri giovani.
http://didatticaaperta.it/
http://didatticaaperta.it/programma-2013
http://wiildos.it/
http://www.porteapertesulweb.it/
Fonts in html5
Font o non font?
Essere o non essere?
CANIUSE ci dice andate tranquilli.. con ott e otf.
http://caniuse.com/#feat=ttf
Anche se qualche tempo fa invece pareva che IOS non si fosse ancora allineato..
http://www.html5rocks.com/en/tutorials/webfonts/quick/
Interessante articolo sulla tipografia nel web: http://designerbreak.com/2009/tutorial/font-face-e-webfonts-come-usarli/
non volete usare font aggiunti ma solo gli standard?
quali standard? hahaha
vabbhè quelli di default sono : http://www.tutorialspoint.com/html5/html5_fonts.htm
RIPASSARE LE BASI: http://www.cssbasics.com/css-font-properties/
Vediamo di complicare le cose.. se uno volesse usare un carattere extra expanded come potrebbe fare?
perchè bene o male tutte le altre cose si riescono ad ottenere, cambiare l’interlinea, il peso, la dimensione, la distanda tra le lettere..
BHe.. firefox ci ha pensato.. ma nessun altro browser sembra aderire.. tranne IE.. sembra una barzelletta!
https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch?redirectlocale=en-US&redirectslug=CSS%2Ffont-stretch#Interpolation
Speriamo che il W3C la passi fuori dal draft!
Anche se francamento ho provato ad usarla e su firefox 24 non mi funziona.
Articolo completo:
https://developer.mozilla.org/en-US/docs/Web/CSS/font
Altra ancora di salvezza. http://www.google.com/fonts
ma con poca scelta secondo me 😛
Lo strumento definitivo.. se avete il font in un solo formato, è : http://www.fontsquirrel.com/tools/webfont-generator
però sono blacklistati tutti i font proprietari!! hihii
e se ne accorge anche se gli cambi il nome!!