20191119f_1-CREEK by @odlanir 202004250913

#menu!

[id="indice00"]

Cripple Creek coding by italian underground software distillery

1 2 3 4 5

Directory

#directory

Lista dei tag

#indicetag

#tagcreek

T1 template modello

Costruzione

LATO USER

Il lato user dovrebbe offrire uno schema o grid (griglia) standard a disposizione dell'user (utente) con "gioco" all'interno di element main

body attesa()

main container (*)

section ui container relative

article ui internally celled grid

aside row

div wide column

(*) è possibile spostare ui container in main togliendolo però da section che resta con relative . Un cambiamento del genere in teoria libererebbe section da un attribute ereditato da semantic, in tal modo rendendo section meno legata alle dipendenze esterne liberando user. Ciò ha un senso e dev'essere però controllato con attenzione.

Tenere a conto le personalizzazioni di class nei vari elementi componenti user . Ognuna delle componenti nested ha una class bordo per es.: .bordomain che permette una personalizzazione (magari anche oltre il bordo).

Dato che le personalizzazioni vanno realizzate dopo quelle standard occorre che nel parsing seriale le personalizzazioni siano dopo le standard. Nel progetto sul lato user occorre stabilire in quale momento logico lo snip passa da user a admin.
Ossia abbiamo il template con le scatole cinesi disponibili main/section/article/aside invece div deve rispettare la somma 16 . Ossia al user per i snip sono lasciati gli elementi <p> <span> <img> che vanno posizionati nelle column del div.

LATO ADMIN

Il lato admin dovrebbe essere separato e contenere comandi non modificabili se non dall' amministratore. Il problema sta nella distribuzione in quanto essendo in presenza del main una qualsiasi manipolazione del codice può portare al possibile crash del programma.

L' idea sarebbe di separare il lato admin sistemandolo in un file esterno usando il metodo document.getElementByIdInnerHTML una soluzione del genere sarebbe l'ideale ma deve essere tenuto conto di alcune stranezze derivate dal asincrono. In particolare, e questo è importante, la funzione attesa() non è gestita in maniera ottimale con getElement in questo caso va tolto dallo script il blocco Loading... per garantirne il funzionamento in quanto se venisse visualizzato il Loading... a fine caricamento asincrono del document html ne verrebbe meno la utilità. Altri fault sono possibili addirittura con altre parti del programma html . Detto questo un documentGetElement fuori dal parsing sincrono principale del documento va valutato con attenzione in quanto può comportare bug insidiosi. A ciò si aggiunge il problema degli id singoli e il comportamento dei browser nel gestire i doppi id .

Altro fault da non sottovalutare è la regola di rispettare la impossibilità del nesting per alcuni element in particolare section . Nella sezione admin e codice collegato si deve assumere come regola assoluta di usare elements che accettano il nesting . Del tipo div e affini.

html #suptagHTMLT1 comprende anche sessione php

body

#suptagBODYT1

comprende funzione attesa() e class sfondo

main

#suptagMAINT1

In questo template l'elemento main e' senza attributes poiche' contiene una section che ovvia ad una serie di problemi responsive main e' meglio farlo gestire da semantic ui dato che section article div p span sono maggiormente flessibili e poi sono gia' ampiamente delimitati dagli elementi body e main

section

#suptagSECTIONT1

class ui container e style position relative

article

#suptagARTICLET1

ui internally celled grid

aside

#suptagASIDET1

class row

div

#suptagDIVT1

l'elemento div gestisce il numero di colonne all'interno del row datosi il semantic ui ha 16 suddivisioni la somma delle column dev'essere 16 esempio aside div class two wide column twelve wide column two wide column /div /aside

Modello lato user #supertagLATOUSERT1

html

Contiene gli standard di identificazione
e un possibile utilizzo in ambito PHP del tipo login logout.

----

body

Definisce alcune caratteristiche tipiche e in piu'
fornisce uno spinner percentuale (max circa 50min)
di avviso loading. Alcuni quirk derivanti dal
deprecato <center> sono in questo caso
ovviati dall'uso del semantic ui.

----

main

E' importante definirlo nel documento anche se
in questo template rimane unicamente come
delimitatore logico dello spazio user.

----

section

Qui appare il container e la posizione relative.

----

article

Qui celled grid.

----

aside

Qui row.

----

div

Gestisce wide column.

LATO ADMIN t1

Una volta delimitata la struttura del documento HTML tra il tag di /main e /body abbiamo section /section sono inseriti gli elementi costanti i quali sono manipolabili solamente dall'amministratore del documento e non dall'user in quanto potrebbe compromettere l'intera struttura del documenti, in particolare gli script i quali a differenza del html sono poco tolleranti agli errori grammaticali. Importante annotazione riferita all'uso dell'elemento section che risulterebbe not nested almeno nelle raccomandazioni. Risulta quindi un solo section nel lato admin.

semantic link

#suptagLINKUIT1

intestazioni / pie' di pagina

#suptagINTESTAZIONIT1

indicazione istogramma progressione

#suptagPROGRESSIONET1

spinner loading percento

#suptagSPINNERT1

#suptagDROPMENUT1

#suptagMODALET1

#suptagHIDESHOWT1

#suptagSTILET1

scrive cronologia php

#suptagPHPCRONOLOGIAT1

id fine

#suptagIDFINET1

archivio snip

Software raccoglitore #softwareraccoglitore

base #usdbase USDBASE senza javascript sconsigliato

base WYSIWYG #usdbasewys USDBASE WYSIWYG senza javascript

griglia base 8+8 #usdgrigliaresponsivewys responsive

griglia special 3+3 #usdgrigliaspecialeresponsivewys responsive

foglio di stile base #fogliodistilebase

script base #usdjavascriptbase

script L0L1L2 #usdjavascriptbaseL0L1L2

script L3 #usdjavascriptbaseL3

script L4 #usdjavascriptbaseL4

script L5 #usdjavascriptbaseL5

elenco dei siti collegati #elencodeisiticollegati

west europe standard time #annogiornoora

USD BASE FULL compact #USDBASE

USD BASE FULL xmp#USDBASExmp WYSIWYG con javascript

Editor Pagina BASE #USDpaginabasewysiwyg codice css javascript incluso in html ma senza grid semantic

ebook #usdebook sfogliatore di immagini
- gerarchia dei files #usdbookgerarchia

USD BOOK compact #USDBOOK

USD BOOK FULL xmp #USDBOOKxmp WYSIWYG con javascript

E BOOK nuova versione#USDBOOKwysiwyg

E BOOK xmp #USDBOOKxmpwysiwyg Esempio di programmazione.

dimensioni dello schermo e della finestra #dimensionidelloschermo

copia nella clipboard #copianellaclipboard copia codice nella clipboard

php #codicephp
- scrive sul server cronologia #codicecronologia memorizza nome file visitato
- visualizza directory files #codicedirectory nomi file e cartelle
- codice LOGIN #codicelogin login index logout

Multimedia #multimediacodice immagini,suoni,video

suono #playsuono controlli nell'esecuzione

eccomi menu! indice00 directory indicetag tagcreek

T1 template/modello NEW

suptagHTMLT1 suptagBODYT1 suptagMAINT1 suptagSECTIONT1 suptagARTICLET1 suptagASIDET1 suptagDIVT1 supertagLATOUSERT1

suptagLINKUIT1 suptagINTESTAZIONIT1 suptagSPINNERT1 suptagDROPMENUT1 suptagMODALET1 suptagHIDESHOWT1 suptagSTILET1 suptagPHPCRONOLOGIAT1 suptagIDFINET1 suptagT1test01

softwareraccoglitore

usdbase usdbasewys

USDpaginabasewysiwyg

usdgrigliaresponsivewys usdgrigliaspecialeresponsivewys fogliodistilebase

usdjavascriptbase usdjavascriptbaseL0L1L2 usdjavascriptbaseL3 usdjavascriptbaseL4 usdjavascriptbaseL5

elencodeisiticollegati annogiornoora

USDBASE USDBASExmp

usdebook usdbookgerarchia usdbookhtml1 usdbookhtml1_1 usdbookhtml2 usdbookhtml2_2 usdbookhtml3

usdbookceb01 usdbookCEB01_1 usdbookceb02

usdbookjeb01 usdbookjeb02 usdbookjeb03

USDBOOK USDBOOKxmp

USDBOOKwysiwyg USDBOOKxmpwysiwyg

frammentidicodice

sedicix1g ottox2g quattrox4g

sedicix1 ottox2 quattrox4 duex8 unox16

grigliaprogrammainesecuzione grigliacopytoclipboard tablesemantic celledgrid

codiciascii

codicicoloristandard codicicolorirgba

codicicoloripersonalizzati

spinners spinner01 spinner02

menulaterale

showhide

semanticesempi

semanticbutton semanticdivider

semanticaccessibilityicons semanticarrowsicons semanticaudiovideosicons semanticbusinessicons semanticchessicons semanticcodeicons semanticcommunicationicons semanticcomputersicons semanticcurrencyicons semanticdatetimeicons semanticdesignicons semanticeditorsicons semanticfilesicons semanticgendersicons semantichandgesturesicons semantichealthicons semanticimagesicons semanticinterfacesicons semanticlogisticsicons semanticmapsicons semanticmedicalicons semanticobjectsicons semanticpaymentshoppingicons semanticshapesicons semanticspinnersicons semanticsportsicons semanticstatusicons semanticuserspeopleicons semanticvehiclesicons semanticwritingicons semanticbrandsicons

icone-standard

#icone-sprite

semanticgridmenu

dimensionidelloschermo

copianellaclipboard

codicephp codicecronologia codicedirectory codicelogin

multimediacodice playsuono