13 gennaio 2020

14 gennaio 2020 Riferimenti applicativi:
20200113TABELLAHTML.docx

20200113TABELLAHTML.html

Bugs: A B C D E F G H I L M N O P Q R S T U V Z A B C D E F G H I L M N O P Q R S T U V Z

Il codice produce una stringa in verticale posizionata left 50% margin-left -384px
il problema consiste nel fatto che la string funziona ottimamente quando nello stile usiamo solo il color, in questo caso le lettere sono allineate e visibili in verticale separate da uno intervallo di 12px
ora quando inserisco lo sfondo con il comando background-color la visibilità viene compromessa.
Se, invece del sans-serif o serif si usa il monospace allora sembra la visualizzazione sia corretta.

Esercizio di programmazione Il programma esegue il template sk riveduto e corretto, testato con background-image

<!DOCTYPE html > <html >

<head >

<meta http-equiv="content-type" content="text/html; charset=UTF-8" > <meta charset="utf-8" > <meta name="generator" content="AlterVista - Editor HTML" > <title > </title > <!-- sk vers.2020 01 13 16:12 -- > <meta charset="utf-8" > <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >

<!-- stile video v000 ini -- >

<style > body{ background-color:rgba(60,10,10,1.0); color:rgba(200,200,200,1.0); font-size:1rem; font-family:monospace;} /* default */ </style >

<style > a{background-color:gray; color:black;} .cartitolo{ font-size:1rem; background-color:gray; color:black; } .bordotitolo{border-bottom:solid 1px orange;} .bordo3{ padding:24px; text-align:center; } .bordohome{font-size:2.4rem; border-radius:10px; border:solid 6px maroon;} /* definizione class tavola video immagine */ .p-tavola-video { } .tavola-video { } .tbody-video { } .tr-video { } .td-video { } .td-src-video { width: 288px; height: 240px; margin:0px; padding:0px; } .p-td-video { } /* definizione class tavola video article */ .SRC-VIDEO{ width: 288px; height: 240px; margin:0px; padding:0px; } .p-tavola-immagini { } .tavola-immagini { } .tbody-immagini { } .tr-immagini { } .td-immagini { } .td-src-immagini { width: 288px; height: auto; } .p-td-immagini { } .menuv000 { font-size:large; font-variant:small-caps; font-family:sans-serif; } </style > <!-- stile video v000 fin -- >

<style > @media screen and (min-width:768px) { body{ background-color:rgba(0,10,10,1.0); color:white; font-size:1rem; font-family:monospace; } main {width:672px; margin-top:96px; margin-bottom:96px; background-color:rgba(60,10,10,1.0); color:white; font-size:1rem; font-family:monospace;} } @media screen and (max-width:768px) { body{ background-color:rgba(60,10,10,1.0); color:white; font-size:1rem; font-family:monospace; } main {width:672px; margin-top:96px; margin-bottom:96px; background-color:rgba(60,10,10,1.0); color:white; font-size:1rem; font-family:monospace;} } </style >

<style > .icona { width:24px; height:24px; } .bordo1{ border:solid 0px blue; } .bordomain{ border:solid 1px gray; } </style >

<style > .bordoloading{ position:fixed; top:0px; left:50%; margin-left:-360px; padding:6px; background-color:black; background-color:transparent; font-size:18px; font-family:monospace; font-variant:small-caps; } .loading-stile{ background-color:black; } .lampeggio { animation: blinker 1.5s linear infinite; } @keyframes blinker { 50% { opacity: 0; } } </style >

<style > .bordo111d{ border:solid 0px orange;} .bordo121d{ border:solid 0px orange;} .bordo131d{ border:solid 0px orange;} .dropmenu111{ position:fixed; bottom:0px; left:0px; width:100%; height:24px; margin:0px; padding:0px; } .dropmenu121{ position:fixed; bottom:0px; left:50%; margin-left:-360px; font-size:24px; color:gray; } .dropmenu131{display:none;} .dropmenu111:hover .dropmenu131{ position:fixed; bottom:0px; left:50%; margin-left:-336px; margin-top:0px; margin-bottom:0px; padding:0px; width:672px; height:24px; height:24px; display:block; } .dropmenu111:hover .dropmenu121{display:none;} </style >

<style > .bordomodale{ border:solid 1px gray;} .bordocontenutomodale{ border:solid 1px olive;} .modale{ position:fixed; top:0;right:0;bottom:0;left:0; background-color:rgba(0,0,0,0.9); z-index:100; pointer-events:none; opacity:0; } .modale:target {pointer-events: auto; opacity:1;} .contenutomodale{ position:fixed; top:10%; left:50%; margin-left:-168px; /* width:2 */ width:336px; height:336px; background-color:rgba(0,0,0,1.0); overflow:auto; } </style >

</head >

<center > <main class="bordomain" style="margin-bottom:0px;" > <p id="webdesign" >Ooops! </p > <script src="webdesign.js" > </script > </main > </center >

<div id="modale" class="modale bordomodale" > <a href="#" class="material-icons" style="margin:0px;padding:0px;" > cancel </a > <div class="contenutomodale bordocontenutomodale" > <p style="text-align:center;" > <a class="material-icons" href="http://edoraandiamo.altervista.org/index.html" > home </a > </p > </div > </div > <a href="#" style="position:fixed; bottom:0px;left:0px; z-index:101;" >. </a > <a href="#" style="position:fixed; bottom:0px;right:0px; z-index:101;" >. </a >

<div class="dropmenu111 bordo111d" > <span class="material-icons dropmenu121 bordo121d" style="background-color:gray; color:black;" > menu </span > <div class="dropmenu131 bordo131d" style="position:relative; background-color:black;" > <span style="position:absolute; bottom:0%; left:0%; left:1%;" > <span style=" background-color:black; font-size:12px; text-transform:uppercase;" > webdesign 2020 </span > <span > <img class="icona" src="http://edoraandiamo.altervista.org/1.0/rinaldo-rasa-avatar.png" alt="" title="Rinaldo Rasa" style="width:16px; height:16px;margin:0px;padding:0px;" > </span > <a href="mailto:rinaldo.rasa@gmail.com" class="material-icons" style=" background-color:black; color:gray; font-size:18px; " > contact_mail </a > </span > <span class="material-icons" style="position:absolute;bottom:0%; left:50%; font-size:18px;" > <a href="#modale" style="font-size:24px; background-color:black; color:green; " > info </a > </span > <span class="material-icons" style="position:absolute;bottom:0%; left:76%; " > <a href="#fine" class="" style="font-size:18px; font-size:22px; background-color:black; color:orange;" > keyboard_arrow_down </a > </span > <span class="material-icons" style="position:absolute;bottom:0%; left:96%;" > <a href="#" class="" style="font-size:18px; font-size:22px; background-color:black; color:orange;" > keyboard_arrow_up </a > </span > </div > </div >

<div id="AttendereLoading" class="bordoloading" > <div class="" style="background-color:black;" > <span > </span > <span > <svg height="10" width="10" class="lampeggio" > <circle cx="5" cy="5" r="5" fill="orange" / > </svg > </span > <span class="loading-stile" > Loading... <span id="percento" > </span > </span > <span > </span > </div > </div >

<div id="fine" > </div > <!-- -- > <style > body, main { /* background-image:url('http://noteapiedipagina.altervista.org/WWWRoot/immagini/carta01.gif'); */ background-image:url('http://edoraandiamo.altervista.org/img0/carta06.png'); </style > <!-- -- > </body >

</html >

ski22 ex 201 ≫ 12 gennaio 2020

Criticità della programmazione:
Il motivo di un tale modo di programma è quello di fornire uno schema (template) standard in modo che l'user abbia solo da inserire il contenuto in main.
L'user non può modificare il template formato da:
0)cancelmodale.js in http://edoraandiamo.altervista.org/2/2/cancelmodale.js
1)stileglobale.js in http://edoraandiamo.altervista.org/2/2/stileglobale.js
2)DropMenu.js in http://edoraandiamo.altervista.org/2/2/DropMenu.js
3)Loading.js in http://edoraandiamo.altervista.org/2/2/Loading.js
4)Landing.js in http://edoraandiamo.altervista.org/2/2/Landing.js
5)backdoor.js in http://edoraandiamo.altervista.org/2/2/backdoor.js

Osservazioni:
è importante tenere a mente l'ordine con cui si inseriscono i frammenti di codice js
in genere nella sequenza 0---5 sono stabiliti dei settaggi validi per lo schema prefissato in genere il concetto è quello del puzzle.

0) Si riferisce al dialogo modale il quale teoricamente è l'unico cui l'user può riempire di contenuti del tipo link esterni alla pagina in questione. Si tratta di un elemento critico in quanto se viene tolto per errore impedisce di uscire dal dialogo modale.
Per maggior sicurezza è stato inserito un backdoor al punto 5)

1) Contiene i settaggi dei fogli di style.css

2) Il menu è sistemato a fondo pagina (bottom) ed è mouseover contiene i crediti di contatto con l'amministratore, il bottone di attivazione del dialogo modale, i bottoni per navigazione interna verso fine oppure inizio. Sono utilizzate le icone material-icons reperibili al link <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

3) Questo blocco contiene l'avvertimento del tempo di loading nel caso la pagina fosse pesante nel caricamento. Sono visualizzati un punto lampeggiante oppure uno spinner, una scritta LOADING... e una visione percentuale del caricamento, tempo lungo standard 50min setinterval 30000ms.

4) Qui è presente la function AttendereLanding() evocata nell'avvio automatico nel body onload=AttendereLanding() è l'id Landing che permette di circoscrivere la visualizzazione dell'avvertimento caricamento lungo.
La seconda parte è il conteggio del tempo rimanente per il caricamento, approssimato a 30000ms.

4) vedi il punto 0)

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta name="generator" content="AlterVista - Editor HTML"> <title></title>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body onload="AttendereLandingx()"> <center> <main class="bordo1" style="margin-bottom:0px;"> <section> <div id="altervistaforall1">Ooops!</div> <script src="http://edoraandiamo.altervista.org/1.0/3/altervistaforall1.js"> </script> </section> </main> </center> <div id="modale" class="modale"> <div id="cancelmodale" class="contenutomodale bordo1"> <section> </section> </div> </div> <script src="http://edoraandiamo.altervista.org/2/2/cancelmodale.js"></script> <div id="stileglobale"> </div> <script src="http://edoraandiamo.altervista.org/2/2/stileglobale.js"></script> <div id="DropMenu"> </script> <script src="http://edoraandiamo.altervista.org/2/2/DropMenu.js"></script> <div id="Loading"> </div> <script src="http://edoraandiamo.altervista.org/2/2/Loading.js"></script> <script src="http://edoraandiamo.altervista.org/2/2/Landing.js"></script> <div id="backdoor"> </div> <script src="http://edoraandiamo.altervista.org/2/2/backdoor.js"></script> <style> .bordo1{border:solid 1px rgba(255,255,255,0.1);}</style> <style> body, main {background-image:url('http://noteapiedipagina.altervista.org/WWWRoot/immagini/carta01.gif');} </style> <div id="fine"></div> </body>  </html>

<?php session_start(); /* inizia la sessione */ /* controllo Login form */ if(isset($_POST['Submit'])){ /* username e password associtea array */ $logins = array('username0' => 'password0','username1' => 'password1','username2' => 'password2'); /* associare username e password alla variabile */ $Username = isset($_POST['Username']) ? $_POST['Username'] : ''; $Password = isset($_POST['Password']) ? $_POST['Password'] : ''; /* controlla Username e Password */ if (isset($logins[$Username]) && $logins[$Username] == $Password){ /* se tutto ok */ $_SESSION['UserData']['Username']=$logins[$Username]; header("location:index2.php"); exit; } else { /* se sbagliato */ $msg="<span style='color:red'>Login non valido</span>"; } } ?> <form action="" method="post" name="Login_Form"> <table width="400" border="0" align="center" cellpadding="5" cellspacing="1" class="Table"> <?php if(isset($msg)){?> <tr> <td colspan="2" align="center" valign="top"><?php echo $msg;?></td> </tr> <?php } ?> <tr> <td colspan="2" align="left" valign="top"><h3>Login</h3></td> </tr> <tr> <td align="right" valign="top">Username</td> <td><input name="Username" type="text" class="Input"></td> </tr> <tr> <td align="right">Password</td> <td><input name="Password" type="password" class="Input"></td> </tr> <tr> <td> </td> <td><input name="Submit" type="submit" value="Login" class="Button3"></td> </tr> </table> </form>  <?php session_start(); /* Starts the session */ if(!isset($_SESSION['UserData']['Username'])){ header("location:login2.php"); exit; } ?> Loggato! <a href="logout.php">Click </a> LOGOUT.  <?php session_start(); /* Starts the session */session_destroy(); /* Destroy started session */header("location:login.php"); /* Redirect to login page */exit; ?>

Sequenza getElement javascript :

document.getElementById('cancelmodale').innerHTML= '<a href="#" class="material-icons '+ ' cancel-modale-stile">'+ ' cancel</a>'

document.getElementById('DropMenu').innerHTML= ''+ '<div class="dropmenu11 bordo1"> '+ ' <span class="material-icons dropmenu12"' + ' style="background-color:gray; color:black;">'+ ' menu'+ ' </span>'+ '' + ' <div class="dropmenu13 bordo1"'+ ' style="position:relative; background-color:black;">'+ ''+ '<span style="position:absolute;bottom:0%; left:0%;'+ 'font-size:0.8rem; text-transform:uppercase; ">'+ ' webdesign 2020'+ ' <span>'+ ' <img class="icona"'+ ' src="http://edoraandiamo.altervista.org/1.0/rinaldo-rasa-avatar.png"'+ ' alt="" title="Rinaldo Rasa" '+ ' style="width:18px; height:18px;">'+ ' </span>'+ ' <span class="material-icons" >'+ ' <a href="mailto:rinaldo.rasa@gmail.com"'+ ' class="contact_mail-stile" style="font-size:18px;">'+ ' contact_mail'+ ' </a>'+ ' </span>'+ ' </span>'+ ' <span class="material-icons" '+ ' style="position:absolute;bottom:0%; left:50%;'+ ' font-size:18px;" >'+ ' <a href="#modale" class="info-stile" >'+ ' info</a> '+ ' </span>'+ ' <span class="material-icons" '+ ' style="position:absolute;bottom:0%; left:70%;'+ ' font-size:18px;" >'+ ' <a href="#fine" class="keyboard_arrow_down-up-stile" >'+ ' keyboard_arrow_down </a> '+ ' </span>'+ ' <span class="material-icons" '+ ' style="position:absolute;bottom:0%; left:90%;'+ ' font-size:18px;" >'+ ' <a href="#" class="keyboard_arrow_down-up-stile" >'+ ' keyboard_arrow_up </a> '+ ' </span>'+ ''+ ''+ ' </div>'+ '</div>'

document.getElementById('Loading').innerHTML= ''+ ''+ '<div id="Landing" class="bordoloading">'+ '<div class="bordo1">'+ '<span style="background-color:black;"> </span>'+ '<span style="background-color:black;">'+ '<svg'+ ' height="10" width="10" '+ 'class="lampeggio bordo1" >'+ '<circle cx="5" cy="5" r="5" fill="orange" />'+ '</svg>'+ '</span>'+ '<span class="loading-stile"> Loading... '+ '<span id="percento"></span> </span>'+ '</div>'+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ ''+ '</div>'+ '</div>'

document.getElementById('backdoor').innerHTML= '<a href="#" class="material-icons backdoor-modale-cancel-stile">.</a>'+ '<a href="#" style="position:fixed; bottom:0px;left:0px;z-index:101;">.</a>'

Riduzione ≫ 30 dicembre 2019

<a href=" § [<\<]*[>\>] NULLA -^p NULLA |^p NULLA File NULLA Dimensione NULLA Data NULLA Parent NULLA ^p NULLA Apri NULLA Scarica NULLA Rinomina NULLA Elimina NULLA 17/09/2019 NULLA " onclick="return LF.action('preview', ' NULLA '[)\)]" title=""[>\>] £ ? MB NULLA mp4?'[)\)]"[>\>] mp5£ mp4??'[)\)]"[>\>] mp5£ [>\>] NULLA ???????????????.mp4 NULLA §https://s426.altervista.org/ NULLA §#" onclick= NULLA mp5£ mp5§ http://venexiadue.altervista.org/video/20190917b/?£ NULLA http://venexiadue.altervista.org/video/20190917b/??£ NULLA " NULLA mp5§ mp5° § NULLA return LF.action NULLA ('download', NULLA '?£ NULLA ('rename', NULLA ('delete', ' NULLA ?'[)\)] NULLA title= class=error NULLA ??? KB NULLA ???£ NULLA 1^p NULLA mp5° mp4 ^p UNO SPAZIO 2 NULLA ? NULLA ??/??/???? NULLA mp4 mp4^p

<?php $actual_link = "http://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}"; $oggi_est = date("l") . " "; $oggi_est = $oggi_est . date("Y/m/d"); $oggi_est_time = date("h:i:sa"); $fp = fopen('/membri/edoraandiamo/text.txt', 'w'); fwrite($fp, $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($fp); $myfile = fopen("/membri/edoraandiamo/logs.txt", "a") or die("Unable to open file!"); // $actual_link = "cronologia"; fwrite($myfile, "\n". $actual_link. " " .$oggi_est. " ". $oggi_est_time); fclose($myfile); ?>

SKBASE 29 dicembre 2019

<body onload="AttendereLoading()"> permette di visualizzare un messaggio durante il loading con uno spinner animato, una scritta loading... e un indicatore della percentuale di caricamento di 30000ms vale a dire 50minuti circa di attesa, il calcolo è fatto indicativamente e dà una indicazione di lunga attesa. rimane il problema se la duranta del loading supera il massimo consentito in quanto lo spinner continuare a girare e compare un loading...100% il che può creare confusione

<center> <main> <p style="font-size:1rem; margin-bottom:100%;"> main questa è una forma standard di foglio-script html </p> </main> </center> center necessario main è il luogo dove c'è il contenuto non standard della pagina, notare il margin bottom al 100%

<div id="aprimodale" class="modale"> qui abbiamo il dialogo modale anch'esso è non standard, lo script modale contiene la definizione della class modale attenzione aprimodale non ha uno script specifico separato, l'id si trova quindi internamente a un altro file--- attenzione poiché è un bug da risolvere, le cose funzionano anche se c'è un dubbio--- lo schema di lavoro di skbase è quello di utilizzare gli script che hanno nome file corrispondente all'id nel caso di aprimodale si riscontra una eccezione

importante sottolineare che il modale è scritto totalmente in css, con .modale{ pointer-events:none; opacity:0;} si fa sparire dallo schermo il dialogo finchè non si attivi .modale:target {pointer-events: auto; opacity:1;}

<div id="contenutomodale"></div> class che posiziona il blocco del dialogo al centro schermo

<div class="contenutomodale"> un blocco che utilizza la class contenuta nell'id

<div id="chiudimodale"></div> è necessario perché in caso contrario il blocco modale non si chiude se non chiudendo la pagina nel browser

<a href="#" style="font-size:1.0rem; font-family:monospace; background-color:maroon;color:white; opacity:1.0;"> x </a> <a href="#" class="posbackdoormodale" style="color:white;"> . </a> con backdoor

<div id="AttendereLoading" class="posLoading"> qui si trova il blocco dello spinner loading percentuale

qui il getDocument viene visualizzato nel node finchè la pagina è caricata quindi sparisce l'avviso

function AttendereLoading() { if(document.all) {document.all["AttendereLoading"].style.visibility="hidden"; } else if(document.getElementById) { node=document.getElementById("AttendereLoading").style.visibility="hidden"; } }

<div id="spinner"></div> definisce la class spinner

<div id="percento"></div> visulizza la percentuale approssimata a 50minuti circa

var percento=document.getElementById("percento"); var contatore=1; var intervallo=setInterval( function() { percento.innerHTML=contatore+"%"; contatore++; if (contatore===101) {clearInterval(intervallo);} } , 30000)

definisce la funzione percento attivato dall'id percento

<div id="extra"></div> questa è una parte corposa e importante contiene la definizione estetica della pagina, il menu dropdown fissato a fondo schermo, questo menu contiene gli attivatori dei crediti, del menu modale, del vai fine e vai inizio

di seguito ci sono i file esterni ai codici suesposti

<div id="fine"></div> è l'id fine

Esercizio di programmazione.
20191229a_7-paginaINN.html (con script innerHTML)
20191229a_0-pagina.html

dicembre 29 2019

Strutturazione della pagina:

˙ <meta charset="utf-8"> definisce il set caratteri.

˙ <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> definisce il responsive.

˙ <link href="http://nome.altervista.org/file.css" rel="stylesheet" type="text/css"> definisce un foglio di stile esterno.

˙ <script src="http://nome.altervista.org/file.js" type="text/javascript"> </script> definisce un file javascript esterno.

˙ @media screen and (min-width:768px) { main {width:672px; background-color:rgba(60,10,10,1.0); font-size:14px; font-family:monospace; text-align:left; } } con media screen (min/max:width:npx) si definisce una differenza tra computer tipo desktop con uno schermo maggiore dei 768px e un tablet con screen uguale a 768px. L'intero programma si riferisce a un responsive implementato per tablet.

˙ @keyframes spin { 0%{transform:rotate(0deg)} 100%{ transform:rotate(360deg)} } questo è necessario per poter attivare una animazione, per esempio la classe spinner animation: spin 0.8s linear infinite; funziona solamente se c'è keyframes (ci sono versioni di keyframes per Firefox e Safari, quella messa qui è generica ma funziona bene anche con Firefox). Tenere a mente: keyframes dev'essere unico nel codice pagina html altrimenti ci possono essere malfunzionamenti.

Strutturazione fisica della pagina:

+--------------------------------------+ body 768px bkg 0 color 200
|  48             672              48  | main 672px bkg 601010

Commenti alla strutturazione della pagina:

Il main di per sè misura 672px ma dev'essere centrato con <center/> il quale non può essere contenuto in uno style{}. Occorre ricordarsi del <center/><main> per avere un giusta presentazione della pagina.
Main ha un header e footer di 60px per evitare sovrapposizioni con i fixed.

Definizione dello stile dei caratteri:
carattere normale 14px di default per section, article, div, p, span, footer, header, aside, td

Quattro frammenti essenziali:

1) Gestisce la parte del programma che attiene al download della pagina. Quando la pagina non è ancora stata caricata può essere visualizzato un messaggio di avviso all'user. Collegato con il fram 2)

2) Gestisce le modalità di avviso dell'user durante il download "lungo". E' composto da uno spinner affiancato da un messaggio Loading... e da una percentuale di download "lungo" di circa 50 minuti, ogni 1% corrisponde a 30sec.

3) Gestisce il menu a discesa (dropdown menu) completamente definito in foglio di stile e posizionato fixed bottom.

4) Gestisce il modal dialog.

Tutti questi quattro fram code sono collegati a un document.getElementById().innerHTML
1) id="Attendere1" , 2) id="Attendere0" , 3) id="finepagina" , 4) id="dialogomodale"

Tenere presente: gli id hanno precedenza sulle classi e possono essere usati una sola volta all'interno di una pagina. è possibile un conflitto con i fogli di stile e con style riferito a quel particolare div.
Dei quattro fram code 1 primi tre 1),2),3) sono stand-alone, vale a dire possono essere evocati e usati tramite indirizzo web indipendentemente dal contenuto della pagina.
Il 4) invece fa riferimento ad un foglio di stile locale personalizzato. Se non c'è questo locale viene visualizzato un foglio di stile indirizzo web. Qui si evidenzia il conflitto in quanto nella pagina ci stanno due puntatori al quell'id. l'id in questione è dialogomodale .

/*  http://edoraandiamo.altervista.org/1.0/2/Attendere1.js  */
/*  aggiornato 17:01 13/12/2019  */

function Attendere1(){

if (document.all)
{document.all["Attendere1"].style.visibility="hidden;"}
else if 
(document.getElementById)
{ /* */
node=document.getElementById("Attendere1").style.visibility="hidden";
/* */ }

}

2
/* spinner Loading... percentuale */ /* http://edoraandiamo.altervista.org/1.0/2/Attendere0.js */ /* aggiornamento del 16:50 13/12/2019 */ document.getElementById('Attendere0').innerHTML=' <div style="position:fixed; top:0px; left:50%; margin-left:-336px; margin-left:-384px;"> <div style="position:relative;top:0px;left:24px;"> <style> .spinner{ width:1px; height:1px; background-color:black; border:solid 12px black; border-top:solid 12px white; border-radius:50%; animation: spin 0.8s linear infinite; } </style> <div style=" position:fixed; top:0px; left:50%; margin-left:-336px; margin-left:-384px; "> <span style="position:absolute;top:0px;left:48px;font-size:24px;font-variant:small-caps;">Loading...</span> </div> <div id="AvvisoLoading" style="position:absolute;top:0px;left:24px;background-color:black;font-size:24px;font-variant:small-caps;"> </div> <div class="bordo4"> <div class="spinner" style="position:absolute;top:0px;left:0px;"> </div> </div> </div> </div> '

/* http://edoraandiamo.altervista.org/1.0/2/AvvisoLoading.js  */

var percentuale =document.getElementById("AvvisoLoading")

var conta = 1;

var i = setInterval(function(){
	percentuale.innerHTML="Loading..."+conta+"%";
  conta++;
  if(conta === 101) {
    clearInterval(i);
  }
}, 30000);

3
/* http://edoraandiamo.altervista.org/1.0/2/finepagina.js */ document.getElementById('finepagina').innerHTML=' <div class="SC1 bordo1" style="position:fixed; bottom:-10px; bottom:10px; bottom:5px; bottom:0px; left:50%; margin-left:-336px; margin:bottom:0px; padding:0px; width:672px; height:24px; height:46px; font-size:14px; " > <!-- -- > <style > div.piupi { width:48px; height:48px; -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); } </style > <!-- -- > <style > .SC1{ } .SC2{ position:fixed; bottom:0%; bottom:1%; left:50%; margin-left:-360px; margin-left:-364px; margin-top:0px; margin-bottom:0px; } .SC3 {DISPLAY:NONE;} .SC1:HOVER .SC3{ DISPLAY:BLOCK; height:42px; margin:0px; padding:0px; BACKGROUND-COLOR:RGBA(80,80,80,0.0); } </style > <!-- -- > <!-- agit prop icona ini -- > <div class="SC2 bordo2" > <!-- -- > <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="width:24px;height;24px;background-color:rgba(100,100,100,0.0);" > <polyline points="2,9 2,14 12,15" style="fill:none;stroke:black;stroke-width:1"/ > <polyline points="12,8 2,8 12,8 17,3 17,20 12,15" style="fill:none;stroke:black;stroke-width:1" / > <polyline points="19,10 19,12" style="fill:none;stroke:black;stroke-width:1"/ > <polyline points="21,7 21,15" style="fill:none;stroke:black;stroke-width:1"/ > <polyline points="23,4 23,18" style="fill:none;stroke:black;stroke-width:1"/ > <polyline points="5,16 9,22 12,22 9,16" style="fill:none;stroke:black;stroke-width:1"/ > </svg > <!-- -- > </div > <!-- agit prop icona fin -- > <!-- menu modal dialogo ini -- > <div class="SC3 bordo3" style="position:relative;" > <a href="#aprimodale" style="color:rgba(180,180,180,1.0);" > <!-- icona menu ini -- > <div class="bordo3" style="position:absolute; left:32%; width:42px; height:42px; padding-top:0px; padding-left:60px; padding-bottom:0px; padding-right:24px; padding-right:48px; background-color:transparent; font-size:36px;" >= </div > <!-- icona menu fin -- > </a > <!-- menu modal dialogo fin -- > <!-- crediti ini -- > <div id="crediti" class="bordo3_1" style="position:absolute; margin-top:12px; margin-top:0px; left:0%;" > <!-- -- > <table style="BACKGROUND-COLOR:RGBA(80,80,80,0.6);COLOR:BLACK;BORDER-RADIUS:6PX;" > <tr > <td style="font-size:14px;" >2019 </td > <td style="font-size:14px;" > webdesigner </td > <td > <a href="mailto:rinaldo.rasa@gmail.com" > <img src="http://edoraandiamo.altervista.org/1.0/svg/it-mail.svg" alt="" title="" style="width:24px;height:auto;" > </a > </td > <td > <img align="bottom" style="width:24px;height:auto;border-radius:40px;" src="http://edoraandiamo.altervista.org/1.0/avatar/rinaldo-rasa-avatar-image.png" alt="" title="Rinaldo Rasa" > </td > </tr > </table > </div > <!-- crediti fin -- > <a href="#fin" style="color:rgba(180,180,180,1.0);" > <div class="piupi bordo3" style=" position:absolute; top:0px; left:70%; width:42px; height:42px; margin:0px; padding-top:0px; padding-left:0px; padding-bottom:0px; padding-right:0px; background-color:transparent; font-size:36px;" > > </div > </a > <a href="#" style="margin:0px; padding:0px; color:rgba(180,180,180,1.0);" > <div class="piupi bordo3" style=" position:absolute; left:85%; top:0px; width:42px; height:42px; margin:0px; padding-top:0px; padding-left:0px; padding-bottom:0px; padding-right:0px; background-color:transparent; font-size:36px;" > < </div > </a > <!-- -- > </div > <!-- -- > <!-- -- > </div > '

4
/* http://edoraandiamo.altervista.org/1.0/2/dialogomodale.js */ document.getElementById('dialogomodale').innerHTML=''+ ' <style >'+ ' .MODALDIALOGO{ '+ ' position:fixed; /* posizione avviso in t0sx0 */ '+ ' top:0;right:0;bottom:0;left:0; /* definisce tutto lo schermo */ '+ ' background-color:rgba(0,0,0,0.8); /* spegne tutto lo schermo */ '+ ' z-index:100; /* z index molto alto */ '+ ' opacity:0; /* accende lo schermo e toglie il dialogo */ '+ ' pointer-events:none; '+ 'font-size:14px; font-family:monospace; '+ ' } '+ ' .MODALDIALOGO:TARGET '+ ' { opacity:1; pointer-events:auto; } /* riattiva la pagina */ '+ ' .MODALDIALOGO > div { position:relative; } '+ ' .SPANFONT { '+ ' font-size:14px; font-family:monospace; '+ ' margin-left:12px; margin-right:12px; '+ ' } '+ ' </style >'+ ' <div id="aprimodale" class=" MODALDIALOGO " > '+ ' <a href="#close" class="close" style="z-index:101;" > '+ ' <p class="bordo5" style="position:absolute; '+ 'top:10%; left:50%; '+ ' width:432px; height:432px; '+ 'margin-left:-216px; '+ 'background-color:rgba(0,0,0,1.0); '+ ' border:solid 2px maroon; '+ ' overflow:auto;" > '+ ' <a href="#close" class="close" title="Chiudi" > '+ ' <span style="width:24px; height:24px; padding:0px; '+ ' background-color:maroon; color:white; '+ ' font-size:24px;border-radius:0px;" > '+ 'x </span > </a > <span > <br/ > </span > '+ ' <span class="SPANFONT" > ... </span > '+ ' <span id="" style="color:white;" > '+ ' <span class="SPANFONT" > ... </span > '+ ' <span id="" style="color:white;" > '+ ' </span > '+ ' </p > '+ ' <!-- backdoormodale \-\- > '+ ' <a href="" '+ ' style="position:fixed;bottom:0px;left:0px; '+ ' z-index:101;" >. </a > '+ ' </div > '+ ' <!-- <a href="#aprimodale" >Â§ </a > \-\- > '+ ' <!-- \-\- > '+ ' '

Esercizi di programmazione.

http://edoraandiamo.altervista.org/video/v000.html

Ooops!