All posts by kiki

css3

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!
 

accessibilità, App, usabilità

Time usability in web app

da http://www.nngroup.com/articles/response-times-3-important-limits/

The basic advice regarding response times has been about the same for thirty years [Miller 1968; Card et al. 1991]:

  • 0.1 second is about the limit for having the user feel that the system is reacting instantaneously, meaning that no special feedback is necessary except to display the result.
  • 1.0 second is about the limit for the user’s flow of thought to stay uninterrupted, even though the user will notice the delay. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second, but the user does lose the feeling of operating directly on the data.
  • 10 seconds is about the limit for keeping the user’s attention focused on the dialogue. For longer delays, users will want to perform other tasks while waiting for the computer to finish, so they should be given feedback indicating when the computer expects to be done. Feedback during the delay is especially important if the response time is likely to be highly variable, since users will then not know what to expect.
didattica

Strumenti online da segnalare per la didattiva

Pre-intro: Le buone prassi non sono universali.
Intro: Che cos’è il web e che leggi vigono.

  • Che cos’è INTERNET: hardware, software e protocolli.
  • Il far-web e la sua legge: Le licenze d’uso e/o EULA
  • Wikipedia
  • la net-neutrality

Un utile glossario ()
Risorse digitali per metodi tradizionali:
Serbatoi di immagini, suoni , testi e video in licenza aperta:

  • wikimedia
  • progetto guthemberg https://www.gutenberg.org/
  • Librovox https://librivox.org/
  • Epub in CC
  • http://creativecommons.org/
  • Open clipart
  • https://www.freesound.org/
  • Internet archive: testi, audio, video e timemachine

Attività:
“ogni attività è trasversale alla lingua:

  • oer https://www.oercommons.org/
  • http://kidslink.bo.cnr.it/ >> Ipertesti: http://kidslink.bo.cnr.it/irrsaeer/ipertesti.html
  • http://www.icmonterenzio.gov.it/wordpress/elenco-siti-tematici
  • http://funsci.com/texts/index_it.htm
  • http://digilander.libero.it/pieffe43/Micro_motori.htm

In INGLESE:

  • Salto youth (didattica non formale): https://www.salto-youth.net/
  • Attività tra educatori: http://www.exploratorium.edu/visit/west-gallery/science-of-sharing/educator-activities
  • Australiani: http://www.lilithstudio.it/wordpress/strumenti-per-le-lingue/
  • Giapponesi:

es. “riprodurre una immagine  usando google translate.”
SPECIFICHE PER L?ITALIANO:

  • http://al2.integrazioni.it/
  • test ita
  • civica
  • portale IDA

 
COSTRUIRE LE ATTIVITA’:
Educare alla fonte; la ricerca delle informazioni nel web:

  • and / or / not
  • “incisi”
  • esercizi per migliorare la ricerca
  • la regola 36

Infografiche/slide

  • Slid.es
  • http://piktochart.com
  • Slideshare (perchè non usarlo)

Condivisione:

  • http://bibliobox.wikispaces.com/
  • www.piratebox.org/android
  • bluetooth/email/chiavette personali/stampa (la memoria passa anche dalle mani)
  • Short link: http://tiny.cc

Strumenti utili:
Mappe concettuali:
Tag su immagini o video: https://www.thinglink.com/
Timeline e Story map:

  • https://timeline.knightlab.com/
  • https://storymap.knightlab.com/

Lavoro collaborativo:

  • Pad condiviso https://it.padlet.com/
  • Etherpad https://titanpad.com/
  • blog/buddypress/moodle
  • owncloud

Quiz/test:

  • Form online: google, adobe, etc..
  • https://admin.typeform.com/workspaces/896660/

Complete novità:
Eccellenze multimediali:
http://www.theguardian.com/world/ng-interactive/2014/jul/23/a-global-guide-to-the-first-world-war-interactive-documentary
 
Mappe:

  • test di google storia/geografia
  • Streetview: buttato in un punto del globo

Coding:

  • Blocky games   https://blockly-games.appspot.com/?lang=it
  • L’ora del codice
  • IS unplugged

Gaming/Esercitazioni/App:

  • Doodle, es: http://www.google.com/doodles/alan-turings-100th-birthday
  •  Civica: http://blockee.org/

Videotutorial:

  • pc/mac: Audacity
  • Android:
  • IOS:

Radiogiornali:

  • pc/mac: Audacity
  • Android:
  • IOS:

Software libero per la didattica:

  • Geo gebra, …

E le LIM open?

  • Wiild OS http://wiildos.wikispaces.com/Pagina+iniziale
  • Wii Idea http://servizi.istruzioneer.it/arch/wiidea/index.php

Utilyties:

  • scretch
  • dettatura

Guidando spedizioni interattive.

  • Privacy: https://myshadow.org/
  • I pericoli della navigazione: http://www.digitalshadow.com/
  • spot Belga  sulla privacy:
  • info in italiano: http://blog.ontrackdatarecovery.it/ombra-digitale/  e quello della fsf & eff.
  • ONO the robot
  • La prolifica famiglia dei MAL-ware

-La dismissione

  • The story of stuff:
  • i RAEE

-Viviamo in un mondo reale:
Rimani aggiornato:
miur:
indire: http://www.indire.it/
progetti europei: http://www.programmallp.it/index.php?id_cnt=33
 

Uncategorized

1995-2015 Internet fa 20 anni!

E noi c’eravamo dall’inizio!!
MI è venuto in mente.. leggendo un messaggio che nomina eventi a cui fui… e.. il post dice, 12 anni fa!!
Azzo come passa il tempo, anche nella net.
http://alt.hackers.cough.cough.cough.narkive.com/#slidedown_120

sicurezza

SICUREZZA

Controllare per vulnerabilità
owncloud:
https://owncloud.org/security/
https://hackerone.com/owncloud
http://www.cvedetails.com/vulnerability-list/vendor_id-11929/Owncloud.htm
wordpress:
http://www.cvedetails.com/vulnerability-list/vendor_id-2337/product_id-4096/

  1. no admin name user, no domain name as user (anche per db e ftp)
  2. Site always up-date
  3. controllare commenti chiusi ed iscrizioni utenti chiuse
  4. no login in wp-admin
  5. captcha on the login page/ no brute force
  6. ip list for bot
  7. https on login
  8. rewrite rule to 404 for admin area

 
WP-PLUGIN:
-Anti-Malware and Brute-Force Security by ELI
-iThemes Security (cloud solution, piuttosto invasiva)
-Sucuri (?!?! non aggiornato)
 
 

server

rewrite rules – SEO battle against BOT

L’amico SEO mi fa notare le continue incursioni di esseri non umani sul sito dei clienti, che gli falsano le statistiche.

Spam Bots nei Referral di Google Analytics: come bloccarli?


che fare?
io banalmente direi: blacklist degli IP,
Aticolo interessante, le blacklista danno molto lavoro da fare:
http://giovanninews.com/come-creare-una-blacklist
Oppure altri consigliano di filtrarli in google analitics, ma questo non risolve che danno fastidio al server che lavora,
Quindi altri dicono Rewrite rules, che però secondo me, cmq da fastidio al server che lavora..
https://httpd.apache.org/docs/2.4/rewrite/access.html
Quindi si può fare!!
LA cosa che mi lascia perplessa è che puoi rigirare tutti i tuoi scocciatori verso un altro sito…
tipo la concorrenza!!
Non è un po strano?! BHO…
Però ora capisco vagamente quando dicevano attacchi DOS indiretti… mi sa..
E chi fa il redirect rimane anonimo in questo caso?! bho..
Es, questo vecchio articolo:
http://vademecum.aruba.it/start/linux/rewrite.asp