box shadow

bel grattacapo oggi…

fare l’ombra di un div ma solo nei due lati orizzontali sopra e sotto..

è una ombra interna che pare apra della fessure da cui esce un nastro che scorre verticalmente..

come fare?

Ho crato due div uno dentro l’altro; il secondo con position relative, così lo posso controllare solo rispetto a quello esterno;

questo è più comodo per andare poi a riposizionarlo nella pagina e far ein modo che non si scollino tra di loro :)

Quindi ho messo un effetto retinato a quello interno, riducendo la larghezza rispetto a quello esterno, ma mantenendolo alto uguale.

 

Poi ho valuato come si usa la caratteristica box shadow:

box-shadow può essere applicata a tutti gli elementi.

Vediamo subito uno snippet di codice con quella che è la sintassi di base:

box-shadow: 5px 5px 10px 2px #333333;

La sintassi di base prevede la definizione di quattro valori numerici:

  • Il primo valore (5px) imposta lo spostamento dell’ombra in senso orizzontale. Essendo il valore positivo, l’ombra viene collocata sul lato destro del box. Se si usano valori negativi l’ombra viene collocata sul lato sinistro.
  • Il secondo valore (5px) imposta lo spostamento in senso verticale. Dal momento che anche in questo caso si è usato un valore positivo, l’ombra viene collocata sul lato inferiore del box. Usando valori negativi l’ombra viene collocata sul lato superiore del box.
  • Il terzo valore (10px) definisce il livello di sfocatura (blur radius) dell’ombra: più alto è questo valore, più sfocata apparirà l’ombra. Si usi 0 se si desidera un’ombra netta e senza sfocatura. Non sono permessi valori negativi.
  • Il quarto valore (2px) imposta il livello di diffusione (spread radius) dell’ombra. Più i valori sono alti, più l’ombra tenderà ad espandersi, in tutte le direzioni. Se invece si usano valori negativi, l’ombra tende a contrarsi, fino a scomparire del tutto.

Di questi quattro valori, gli unici obbligatori sono i primi due. I valori della sfocatura e della diffusione, invece, possono essere omessi. Se non specificati, tali valori sono pari per default a 0.

Ultimo è il colore.

da http://www.html.it/pag/19453/box-shadow/

 

Quindi il primo per me deve essere 0; invece per il secondo ne dovrò fare due inmodo da davere un obra sopra ed una ombra sotto.

Il mio problema è che non sono ombre esterne, ma ombre interne al box..

e qui abbiamo!!

La parola chiave inset

Un ultimo valore possibile per box-shadow è rappresentato dalla parola chiave inset. Usando questo valore l’ombra non si colloca all’esterno del box, ma al suo interno.

 

e poi sorge il secondo problema!!

ma io ho bisogno di un’ombra da un lato solo!!! non da tutti e quattro o solo da due lati..

quindi!?!?!

Bisogna mettere innegativo il 4° valore, quello della diffusione dell’ombra..

bisogna stare un po attenti perchè è da calibrare e cmq l’ombra che si desidera da un solo alto non può essere accentuatuìissima altrimenti cominqcia a spuntare anche dagli altri..

Però la riuscita è buone..

Ecco il codice:

 

html:

<div id=”deco”><div id=”retina”> </div></div>
<span>11</span>

CSS:

#deco
{
margin-left: 15px;
margin-top: 40px;
position: absolute;
width:100px;
height: 630px;
box-shadow: -0px 7px 15px -13px #525252;
}

#retina
{
position: relative;
width:50px;
height:630px;
background:#009CAB;
opacity: 0.15;
margin: 0 auto;

}

però secondo me si vede sempre un pochino.. un difetto..

ecoo un altro metodo senza trick.. diciamo sintatti corretta logicamente:

imposti le tre ombre con colore bianco o quello che hai di sfondo e solo una con il colore scuro:

http://jsfiddle.net/LE6Lz/

html5 tag

HUllalla.. per mettere per esempio l’attributo autoplay, è da mettere sul tag audio, non su source!!

Quindi la dicitura corretta è questa

<audio autoplay controls>
<source src=”music.ogg” />
<source src=”music.mp3″ />
</audio>

html5 e

hum sembrano dei tag vecchi.. ma con html5 hanno incontrato delle novità,

soprattutto area:

Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The <area> tag is supported in all major browsers.

Di base sì.. poi bisogna vedere se anche gli attributi sono supportati.. un po come con i form..


Definition and Usage

The <area> tag defines an area inside an image-map (an image-map is an image with clickable areas).

The <area> element is always nested inside a <map> tag.

Note: The usemap attribute in the <img> tag is associated with the <map> element’s name attribute, and creates a relationship between the image and the map.


Differences Between HTML 4.01 and HTML5

HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.


Differences Between HTML and XHTML

In HTML the <area> tag has no end tag.

In XHTML the <area> tag must be properly closed.


Attributes

New : New in HTML5.

Attribute Value Description
alt text Specifies an alternate text for the area. Required if the href attribute is present
coords coordinates Specifies the coordinates of the area
downloadNew filename Specifies the hyperlink target to be downloaded
href URL Specifies the hyperlink target for the area
hreflangNew language_code Specifies the language of the target URL
mediaNew media query Specifies what media/device the target URL is optimized for
nohref value Not supported in HTML5. Specifies that an area has no associated link
relNew alternate
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
Specifies the relationship between the current document and the target URL
shape default
rect
circle
poly
Specifies the shape of the area
target _blank
_parent
_self
_top
framename
Specifies where to open the target URL
typeNew MIME_type Specifies the MIME type of the target URL
 preso da http://www.w3schools.com/tags/tag_area.asp

IDN

IDN = nome di dominio internazionalizzato

bhe, non lo sapevo.. me l’ho ha detto il mio Thunderbird stamattina:

è il sistema che han trovato per supportare caratteri strani e con accenti.

praticamente sono delle etichette alle quali l’algoritmo IDNA ToASCII può essere applicato in modo corretto; è dagli anni novante che ci lavorano..

Il .it li supporta dalle ore 14:00 del 11 Luglio 2012.[1][2][3] Anche il dominio di primo livello .eu, dal 10 dicembre 2009, supporta i NDI.

[4] Al momento del lancio degli NDI sul dominio .eu, tutti i caratteri delle 23 lingue ufficiali dell’UE sono supportati.

Quindi dopo esserci rassegnati ad usare i minimi caratteri intellegibili ora possiamo darci ad una miriade di etichette in dialetti strani e nomi impronunciabili ed illeggibili..

hahha vabbhene..

Mostruoso!

So che è un po fuori tema, ma è incredibile:

http://rednuht.org/genetic_cars_2/

1) viene generato un tracciato casuale
2) sono generate 20 “auto” casualmente
3) le auto vengono fatte correre sul tracciato
4) le auto che sono arrivate più lontano trasmettono i loro “geni” alla nuova generazione
5) si applica un certo tasso di mutazione alle nuove generazioni
6) torna al punto 3)
Con il progredire delle generazioni le auto diventano sempre più performanti grazie ai geni trasmessi dalle precedenti generazioni.

______________________
Questo è l’altra punta tecnologica della settimana:
https://www.justareflektor.com/
madò!!!

Test di conoscenza della lingua Italiana

All’interno dello LilithStudio stiamo lavorando per la digitalizzazione del libro didattico per migranti:

“TEST di conoscenza della lingua Italiana”

che ha ben 18 schede di verifica sia scritta che di comprensione per passare il famigerato test per il permesso di soggiorno.

QUi pubblichiamo in anteprima, grazie alla gentile concessione delle edizioni La Linea, un simpatico test di comprensione orale:


Es 2 SCHEDA 1
Ascolta due volte la traccia 2 del CD e individua se le seguenti affermazioni sono vere o false, segnando con una crocetta il corrispondente quadratino.
[rapid_quiz question=”a. Lucia invita Marco e suo figlio a una festa di compleanno . ” answer=”V” options=”V|F” notes=”E’ corretto Vero”]
[rapid_quiz question=”b. La festa è alle 10 di domani. ” answer=”F” options=”V|F” notes=”E’ corretto Falso”]
[rapid_quiz question=”c. Domani Marco non ha niente da fare. ” answer=”F” options=”V|F” notes=”E’ corretto Falso”]
[rapid_quiz question=”d. Marco invita Lucia a pranzo per domenica prossima. ” answer=”V” options=”V|F” notes=”E’ corretto Vero”]
[rapid_quiz question=”e. Marco vuole dare un regalo di compleanno alla figlia di Lucia. ” answer=”V” options=”V|F” notes=”E’ corretto Vero”]

Esercizi Online!

Quanto sarebbe bello se la scuola italiana fosse tutta ONline!

Invece abbiamo la fibre ottica per vedere i porno ad alta qualità nelle case di chi se lo può permettere..

e negli ospedali e nelle scuole NIENTE.

Vabbhè.. a me andrebbe bene anche una linea locale.. almeno per scambiarsi i compiti, i registri, le presenze, etc..

non serve nè la Rete mondiale, nè il wireless o i tablet..

Basta un PC sempre acceso (un server :), con una scheda di rete e un cavo ethernet che ne esce. poi degli switch in giro per il palazzo e devi vari computer collegati.

Fine

Certo, poi bisognerebbe avere anche un bidello sistemista.. ma che male fa?!?!

[rapid_quiz question=”Vorreste una scuola cablata con il wireless o con i cavi? ps: wire= cavo / less= senza” answer=”cavi ethernet” options=”wireless|cavi ethernet|non so di che parli” notes=”Mia opinione personale… il wireless consuma un sacco di elettricità..”]

 

Comunque questa era solo una prova per vedere se è comodo fare degli esercizi da condividere online :)

buona giornata!

[rapid_quiz question=”Qual’è la sequenza di simboli usata per commentare le righe di codice javascript?” answer=”//” options=”*/|<!–|//|#” notes=”già già :)”]

OER – Risorse Educative Open

Oggi segnaliamo gli  OER commons, ovvero un grande serbatoio di risorse didattiche digitali integrative, che verranno adottate anche nelle scuole italiane!

A dirlo è il decreto del MIUR di fine mese scorso!!

C’è un mio post su questo!

Ovvero le: http://en.wikipedia.org/wiki/Open_educational_resources

cioè delle risose educazionali con licenza Open, che quindi possono essre usate da tutti, copiate da tutti, modificate e ridistribuite da tutti!

Buona navigazione!

Segnalatemi la vostra preferita!

Wiild OS – Un sistema operativo per le LIM!

E’ fantastico,  la distribuzione GNU/Linux con tutti i programmi per l’educazione che possiamo immaginare!!

In più un buonissimo supporto per trasformare il tuo pc in una LIM, lavagna interattiva multimediale! che per di più non ha limiti di hardware e funziona con i comuni controlli delle wii, anche quelli taroccati cinesi!

Ecco qualche dinostrazione del programma per avere una lavagna digitale: http://wiildos.wikispaces.com/Ardesia

Bravi!  E’ stato davvero un bel lavoro di sviluppo e un bell’investimento della provincia Trentina e dell’Università di Trento!

Vediamo nel dettaglio i programmi che contiene:

Accesiibilità

 

  • ChewingWord e’ un programma innovativo e ludico di aiuto alla scrittura ed alla comunicazione verbale. Il suo principio e’ di sostituire le strutture fisse tradizionali (tavole, alberature, classificatori di pittogrammi) con una tastiera dinamica che si riordina in funzione del contesto.
  • Dasher è un software libero e open source, rilasciato sotto GNU General Public License, di accessibilità che permette di scrivere senza tastiera, utilizzando mouse, touchpad, touch screen, trackball, joystick o Wiimote. Scaricate il manuale in inglese .
  • Eviacam consente di usare il puntatore sullo schermo senza dover muovere il mouse con le mani, ma grazie al movimento della propria testa ripresa da una webcam. Particolarmente utile alle persone affette da problemi motori agli arti.
  • Lettore vocale: si tratta di gspeech, permette di far leggere dal computer il testo selezionato all’interno di qualunque programma. Per attivarlo si deve selezionare del testo, schiacciare l’apposita icona sul pannello e il bottone Esegui. Leggi la documentazione alla pagina Gspeech; lettore vocale della scrivania.
  • Orca; si tratta di orca gestisce la notifica a video, sintesi vocale, braille e ingrandimento dello schermo.
  • Riconosce gesti si tratta di Easystroke. Il programma permette di accociare azioni da intraprendere una volta effettuati col mouse o con il dispositivo di puntamento. Easystroke viene fornito preconfigurato con un insieme di gesti comodi da essere utilizzati sia con il wiimote utilizzato come telecomando presenter attraverso il programma Wiican, che con le lavagne interattive.

 

Accessori

  • Blocco note Leafpad serve a scrivere e leggere testi non formattati.
  • Calcolatrice è la calcolatrice scientifica Galculator.
  • Cerca file permette di trovare file e cartelle.
  • Analizzatore di utilizzo del disco controlla la dimensione delle cartelle e lo spazio libero sul disco
  • Gestore di archivi, si tratta di file roller, gestisce archivi compressi.
  • Guarda immagini si tratta di Gpicview, permette di visualizzare gallerie di immagini.
  • Telecomando Wii abilita l’uso dello wiimote come telecomando e presenter grazie a wiican.
  • Terminale LXTerminal emulatore di terminale che permette di accedere alla bash. Per una guida completa sulla bash in italiano potete consultare quella scritta da Mendel Cooper scaricabile qui.
  • Xkill; serve ad uccidere le applicazioni che non rispondono. Puoi uccidere un programma selezionando la sua finestra.
  • Xournal serve ad annotare su pdf, programma potente per evidenziare e analizzare testi.

Grafica

  • Dia serve a costruire costruire diagrammi.
  • Inkscape è un programma per creare e modificare immagini vettoriali usando forme, testi, tracciati, trasformazioni e livelli. È possibile esportare in formati non vettoriali, raster, che possono essere ulteriormente modificati con Pinta. Per iniziare puoi consultare i tutorial e le video guide.
  • Librecad si tratta di un CAD libero, si presta grazie alle librerie installate sia all’insegnamento della meccanica che dell’elettronica.
  • Pencil disegna un cartone animato o una animazione a due dimensioni.
  • Editor di immagini Gimp il miglior programma libero per il fotoritocco.
  • Fotowall; uno strumento opensource creativo che ti permette di giocare con le immagini come hai sempre voluto! Fai un collage con le tue foto, del testo, il video preso direttamente dalla webcam e le foto migliori in internet.
  • Scanner Simple Scan, cattura immagini con il tuo scanner.
  • Scribus impagina giornali, manifesti e volantini. Potete incominciare a imparare a usarlo seguendo la miniguida in italiano di Paolettopn.
  • TBO; Una applicazione per creare cartoni animati. Ideale per lo story telling.

 

Programmazione

  • Geany è un editor per la programmazione. È possibile insegnare Python, C, XML e HTML.
  • Idle è un ambiente di sviluppo per Python.
  • Scratch è un editor di programmazione visuale, si possono scrivere programmi sia in forma procedurale che ad oggetti, usando mattoncini che rappresentano funzioni logiche, molto educativo. Leggi la guida ufficiale in italiano .
  • Attraverso Synaptic si può aggiungere Kicad EDA; un programma per la progettazione di circuiti stampati. Durante lo sviluppo del progetto si possono utilizzare diversi moduli software che si occupano dei diversi aspetti della progettazione:
    • la redazione dello schema elettrico (schematic) e la compilazione della netlist;
    • lo sbroglio del circuito stampato (anche multistrato);
    • la creazione di nuovi componenti (footprint);
    • la visualizzazione in 3 dimensioni del circuito stampato finito

    Per iniziare a lavorare consultate le guide pubblicate in questa pagina e in quest’altra.

Ufficio

  • Agenda si tratta di Osmo un programma che mette a disposizione una vera e propria agenda personale.
  • Editor di Pdf, si tratta di PdfMod, un programma semplice e utile che ci permette di modificare i nostri file pdf, possiamo inserire, ruotare e rimuovere pagine, estrarre le foto ed importare pagine da altri documenti.
  • Google Calendar permette di utilizzare il calendario di Google, annotare gli argomenti svolti a lezione o predisporre le lezioni future con uno strumento condivisibile via web.
  • Google Docs permette di scrivere documenti in modo collaborativo.
  • Homebank gestisci il bilancio personale, della classe, di un viaggio di istruzione o di una particolare attività. Leggi qui la documentazione.
  • LearnDoubleEntry; ink ad una applicazione web che permette di esercitarsi con le scritture contabili in partita doppia, con piano dei conti multilingue e contenuti condivisibili tra utenti, pubblicati con licenza Creative Commons.
  • Lettore di Libri, si tratta di FBReader, permette di leggere libri digitali, supporta diversi formati di eBook tra i quali ePub, Mobipcket non protetti (Non-DRM), fb2, html, txt, chm, rtf, plucker ed è in grado di leggere direttamente da archivi compressi zip, tar, gzip e bzip2.
  • Libreoffice il pacchetto completo per l’ufficio, da non perdere il pazientissimo lavoro di Giuseppe Tamanini che ha catalogato 20.000 clipart, qui. Il programma fornisce le pagine di aiuto in linea in lingua italiana potete consultare anche la Documentazione ufficiale(al momento solo in lingua inglese). Schiacciando su questa applicazione si possono utilizzare i vari strumenti di ufficio:
  • Ocrfeeder; riconosce il testo da scanner e file ed esporta in vari formati tra cui l’open document forma utilizzato da Libreoffice

e alcuni programmi:

  • Gestisci processi LxTask puoi visualizzare i processi in esecuzione e ucciderli.
  • Informazioni di sistema Hardinfo mostra le informazioni di sistema e permette di testare le periferiche.
  • Spazio su disco visualizza un grafico che mostra lo spazio utilizzato su disco.