Buongiorno a tutta la comunità di drupalitalia!
Come alcuni di voi già sanno, sto sviluppando la versione 3x di marinelli per Drupal 7. Visto che è un tema molto seguito, volevo approfittare del porting per un radicale restyling sia grafico sia strutturale del tema, in modo da poter aggiungere nuove features e consolidare quelle esistenti.
Questo è un primo Brainstorming delle features che volevo inserire nella nuova versione
Features
- Separazione dei css per
- style.css
- layout.css (con le griglie)
- design.css (colori e immagini)
- typography.css (tippografia)
- links.css (links)
- css3.css (dichiarazioni css3)
- logo, titolo e slogan
- link primari e secondari
- mega-dropdown per link primari fino a 3 livelli [opzionale] (altrimenti classico schema primary/secondary)
- css preload con jquery
jquery pngFix incluso- jquery pngFix (opzionale)
- blocchi collapsible
- 3 colonne, ordine arbitrario, regioni sopra e sotto il contenuto e sopra e sotto le sidebars
- fisso larghezza 1024px oppure liquido: l'utente nel primo caso sceglie la larghezza: le larghezze sono tutte percentuali
- banner grafico con testo descrittivo in overlay: si può scegliere se far ruotare i banner tramite js oppure ad ogni reload. Ad ogni banner è possibile collegare un url
- l'utente può scegliere un banner e mantenerlo fisso per la home
- possibilità di cambiare schema colore da backend drupal tramite schemi predefiniti o modulo color?
- possibilità di cambiare lo schema font (titoletti + corpo del testo?)
- markup semantico con classi e id strutturali ((http://meyerweb.com/eric/thoughts/2004/06/26/structural-naming/)
- colonna dei contenuti prima delle sidebar: l'html è lo stesso per tutte le varianti
- skip content e altri elementi di markup per screenreader...
- inclusione di layout per panels
- css per handheld
- css versione alto contrasto
- supporto per tutti i browser (fino a ie6)
- progressive enhancement con css3 (http://www.modernizr.com/)
- Integrazione con Skinr (Mavimo)
- Miglioramento dei messaggi di status di drupal (es: bottone hide)(Kiuz)
- layout con max-width (e min-width?) (eliosha)
Template
Per ora potete vedere i primi progressi qui
http://www.signalkuppe.com/templates/new/node.html
Le vostre idee
Come ben sapete tante teste sono meglio di una: se vi viene in mente qualsiasi altra feature/modifica di markup non esitate a rispondere a questo thread!
Vi ringrazio in anticipo!
Speriamo possa venire fuori un progetto carino :)
non mi piace fa schifo cia' -.-
@DREAMBOY: no comment.
@lioz: lascia perdere certi commenti, sopratutto se non motivati.
detto questo, PERSONALMENTE non rgadirei la presenza di pngfix di default, è pur sempre un codice JS che appesantisce il client che spesso non è necessario, quindi si può evitare, poi se uno lo vuole potrebbe abilitarselo.
considererei il supporto per skinr (chiamiamolo supporto :P ).
Aggiungerei qualche ulteriore regione (2 e 3 colonne) nel footer e sotto l'header prima del content.
Per gli schemi colori IMHO integrazione con color è un buon punto di partenza.
Ciao
Marco
--
My blog
Working at @agavee
perchè non è motivato il mio commento? Scusa sono libero si o no di dire se un prodotto non mi piace oppure no? Per forza li devo andare dietro a dire woooowwwwwwwww ma è stupendoooooooo ma che bravo. Ma cosè tutto questo perbenismo? Che propio tutto questo falso perbenismo che sta in questo paese ha portato l' Italia alla rovina, tutti a leccarsi il c*** a vicenda, tutti finti sorrisi e poi quando ti giri ti accoltellano alle spalle.
Io le cose le dico in faccia non mi prendo la paura di nessuno
@Mavimo: non ti preoccupare ci sono abituato ;)
altra considerazione: secondo voi sarebbe utile l'inserimento di layout di panels che riflettaano la disposizione dei blocchi nella regione del content?
http://www.signalkuppe.com
@lioz: se usi color generi già delle PNG SENZA trasparenze, ma con i colori generati on-fly, quindi non è necessario avere trasparenze. Io ritengo PNG fix un'alternativa, ma decisamente da evitare quando possibile (purtroppo è pesantissimo per i browser).
Per l'header se intendi quello che c'è nel pannello scomparsa ok, ma IMHO sono molto più utili se posizionate SOTTO l'header e sempre visibili (se riempite :P)
Ciao
Marco
--
My blog
Working at @agavee
@Mavimo: ho aggiornato il template aggiungendo anche quelle, intendevi cosi? (ho messo le regioni sia sopra che sotto). Il comportamento immagino che sia 3->33%. 2->50%, 1->100%
Devo leggermi meglio il modulo color ;)
ps: come altra feature pensavo alla possibilità di scegliere anche i font, anche se devo pensare bene a come implementarla..
http://www.signalkuppe.com
io ho trovato molto utile l'elevato grado di modularità del tema, in particolare dei CSS. I css sono separati in modo molto ben fatto semplicemente disbilitando il css per colori e typografia si ottiene una struttura che generalmente va bene per moltissimi siti, ma anche solida a livello di compatibilità quindi è un ottimo punto di partenza anche per realizzare grafiche di una certa complessità ma che presentano un layout di tipo calssico senza troppe pretese...
Direi di consolidare questo aspetto, secondo mio punto di vista. Personalmente apprezzo avere a disposizione un tema che disabilitandogli l'asspetto grafico presenti una struttura generale solida rispetto ai Browser.
{ + } Migliorare o trovare una soluzione alternativa ai messaggi di Drupal (help, messages ... ) che nella versione 7 di drupal sono dei blocchi. Secondo me se offri una soluzione più usabile della media degli altri temi, porteresti in porto diverse persone interessate in più dato che questo rappresenta una delle scocciature più comuni. Ad esempio un semplice pulsantino di "Hide" del messaggio appena apparso non sarebbe male...
Slice2Theme Servizio per la conversione di Design in markup HTML e/o temi.
WeBrain Solution | Pillsofbits Of Bits
grazie Kiuz per i suggerimenti!
inserisco nella lista la tua proposta per quanto riguarda i messaggi!
http://www.signalkuppe.com
scusate se mi intrometto volevo fare un domandina:
le foto nello slideshow in alto ho notato che non sono leggerissime, circa 150kb a foto ma nonostante tutto è veloce nel caricamento, volevo chiedere hai usato qualche accorgimento per renderlo cosi fluido?
faccio questa domanda perchè tempo fa con uno slideshow simile e con foto di circa 100kb il caricamento risultava abbastanza lento.
Voto un più uno per stili personalizzati sia con skinr che per panels.
Mi sembra un buon punto di inizio come numero di regioni, aspetto di vedere il codice :-D
Per rendere più chiaro la mia idea di tema fatto molto bene, penso a questo:
http://drupal.org/project/acquia_prosper
Regioni collassabili (se son 3: 33%, se son 2: 50% etc), schemi di colori aggiuntivi etc
Hai pensato di fare un subtheme di fusion o ninesixty ?
Il secondo, con alcune cose del primo, penso che possa essere la chiave dell'acqua dei temi.
Cmnq sia, buon lavoro.
Ah, altra cosa: mi associo a mavimo per la questione pngFix.
Se proprio necessario, si potrebbe mettere come opzione.
ps. ma un backporting per D6 no, eh ? :-D :-D
ok per panles: in pratica volevo mettere a disposizione sia una griglia che replica fedelmente tutte le zone disponibili nel content sia quealche altra griglia più "asimmetrica".
ora mi guardo i temi che mi hai segnalato!
per quanto riguarda il codice sto cercando di fare il possibile per attenermi agli standard, e limitando il markup. Vediamo cosa riesco a fare, anche qui isuggerimenti sono graditi!
http://www.signalkuppe.com
Altro tema che a volte uso come base e molto ben fatto, sopratutto per l'ordine nella sua struttura è genesis, il fatto di avere tutto suddiviso in cartelle ben ordinate è un plus NON indifferente sopratutto se devi personalizzare parecchio il tema evitando di avere tutto in un unica cartella con il caos pazzesco che si genera.
Non che sia una cosa fondamentale per gli utenti finali, ma per chi usa il tema per personalizzarlo è un plus non indifferente, quindi se vuoi dare un occhio anche a quello :D
Ciao
Marco
--
My blog
Working at @agavee
Da fan accanito di Marinelli mi permetto di intervenire:
- Mi piacevano molto le tab in alto alla pagina e sarebbe carino poter scegliere se aver semplice tab con drop-down oppure una barra con i link che aprono il div come è adesso;
- Sarebbe molto interessante integrare lo slideshow di default oppure permettere la scelta fra lo slideshow e il vecchio rotate.php;
In effetti le mie più che idee nuove son rimembranze del vecchio tema, d'altronde il vecchio mi piaceva così tanto.......
Un fan spassionato di Marinelli 2.x
Pietro
Stay hungry, stay drupaled
Vado avanti con le segnalazioni.. il backend. Quasi nessun tema presta la minima attenzione al backend ed è sempre un disastro, se il tema desse importanza anche a questo non sarebbe mail, grafica uniforme per tutto il sito e non il solito garland (ormai seven) per l'admin.
Ciao
Marco
--
My blog
Working at @agavee
speriamo che seven si tenga per il backend (con admin è perfetto, quasi quanto rubik).
Per il front-end spero si stia preparando qualcosa di meglio...http://drupal.org/node/683026
Certified to Rock
@bohz: non credo che il frontend venga cambiato, ormai si sta cercando di consolidare il tutto, inoltre il tema è una di quelle cose che può essere installato con il minimo sforzo, quindi PERSONALMENTE spero che non si rimetta mano a tutto lo studio fatto sulla UX e ci si dedichi ad altro, magari poi che il tema venga portato a D7 per benino sicuramente male non fa :D
PS: tra l'altro è proprio un bel tema, pulito, leggero...
Ciao
Marco
--
My blog
Working at @agavee
Da uno che smanetta temi solo per
disperazionedivertimento, trovo questo thread molto interessante. Dato che sembra esistere due campi: nudisti (genesis, zen, ecc) e fashion (cioè una tema fatto a posto per un particolare mercato, tipo Acquia), domando: e possibile creare una tema nudo, o in bikini, fino all peliccia, usando sotto temi o altro? Too damned difficult?Dopo tutto mi sembra che vengono sviluppati in questo modo - da nudista a fashion...
John
Più imparo, più dubito.
Ci avevo pensato, ma ho visto che esistono temi dedicati per l'admin ampiamente consolidati, non vorrei aggiungere uno sforzo aggiuntivo che potrebbe risultare inutile visto che gli sviluppatori di quei temi avranno approfondito meglio quelle specifiche tematiche.
http://www.signalkuppe.com
be visto che stp separando completamente tutti i diversi aspetti credo non ci voglia molto ad ottenere un sottotema completamente "nudo"
Per la versione ufficiale (per intenderci, quello che si vede dopo l'attivazione) pensavo però ad un tema già graficamente completo. Darei la possibilità "nudista" come alternativa ! :)
http://www.signalkuppe.com
+1000 per l'approccio. Da quello che vedo in giro marinelli è così utilizzato proprio per questo^!
Per quanto si è detto fino a qui, secondo me:
- non includerei color, almeno non con lo stessa importanza che ha ad es. in garland o pixture reloaded; in questi i temi il colore occupa gran parte dell'impatto visivo (troppo).
- meglio skinr ed eventualmente designkit: le possibili combinazioni di n schemi di colore di background/foreground per 3 o 4 stili diversi di bordi e blocchi sarebbero notevoli (vedi acquia_prosper).
- dropdown (suckerfish?) anche per il secondo livello di navigazione (= submenu/secondary links)
- per il backend, secondo me basta un po di tuning del lato amministrativo per renderlo sufficientemente confortevole.
- d'accordo su tutto il resto. in particolare A+ per:
...poi un layout (subtheme?) per panels everywhere sarebbe il massimo...
Grazie per l'ottimo lavoro!
@mavimo: ...pensavo che l'approvazione dei 2 mantainer di D7 fosse sufficiente per promuovere il tema in core (quando sarà completato)... beh, poco male! ;)
Certified to Rock
@lioz: ci sono temi per admin, ma il backend non è solo quello (vedi i form di creazione contenuti & c) che di solito sono "tralasciati" e quando devi dare in mano lo strumento ad altri.. bhè, ci siamo capiti. :)
@all: orma l'andamento che prediligo è un tema pulito e spoglio come tema base e pi un subtheme che gli aggiunga tutte le cose "graficamente" carine che servono (uno o più ovviamente :P)
Personalmente apprezzo molto il subtheme (anche se per ora mi pare ci siano dei problemi nei subtheme ricorsivi, ed è un peccato :P)
Ciao
Marco
--
My blog
Working at @agavee
Quello che mi sono sempre chiesto è se effettivamente è meglio ragionare con la logica dei sottotemi, anche per quanto riguarda lo stile del tema, soprattutto rispetto ad una soluzione tramite color. Con color si può cambiare colore rapidamente, ma con un sottotema è possibile declinare qualsiasi aspetto. Il sottotema poi è un tema a tutti gli effetti quindi in una logica modulare potrebbe essere la soluzione vincente.
La mia idea è quella di fare un tema base configurabile in base agli aspetti di layout (larghezza contenitore, liquido o fisso colonna sulla destra o sulla sinistra, tipografia) e poi dei diversi sottotemi che, a parità di settings, posso avere una grafica diversa attraverso solo la sovrapposizione di design.css (ed eventualmente di links.css)
Voi cosa ne pensate?
http://www.signalkuppe.com
Mi quoto da solo :)
si potrebbe anche fare così:
1) installazione del tema: l'utente si sceglie
2) creazione di sottotemi
disponibile un sottotema "starter" completamente "nudo" che sovrascrive soltanto questi css lasciati volutamente vuoti
che dite?
http://www.signalkuppe.com
Io opterei per la prima soluzione, tema standard (con color) che poi viene ereditato dai figli (che magari anche sovrascrivono color) che setta i parametri grafici / estetici (quindi ok a logica delle feature e colonne & ... anche nel base).
Ciao
Marco
--
My blog
Working at @agavee
credo di essere arrivato alla stesura completa del codice html. Ho inserito il footer più tre regioni sotto di esso. Ho pensato anche che sarebbe utile riproporre il logo del sito in formato ridotto a fondo pagina per utilizzare come link per tornare in cima. Ho cercato di attribuire delle classi e degli id gerarchici in modo da facilizzare il theming. Valida ovviamente xhtml strict. Che ne pensate? Vedete qualche errore di visualizzazione? accetto di buon grado ogni vostra osservazione!
Ho separato i css anche per i due menu, credo potrebbe tornare utile per chi intende modificare il tema. Ho anche separato il css dei blocchi.
altra cosa che mi è venuta in mente: per la home fare questo ragionamento per le intestazioni.
titolo sito
slogan
titoli teaser
titoli blocchi
poi nelle interne
titolo sito
slogan
titolo nodo
titoli blocchi
seconde me regge :)
http://www.signalkuppe.com
anzi no mi quoto da solo: secondo me in home farei
titolo sito
slogan
titoli estratti
per tutti i titoli di blocco
nelle interne devo ancora studiare meglio la situazione, ma in goni caso h1 andrà al titolo del nodo. Il problema è che avendo tante regioni non ho un'idea ben chiara su come usare le intestazioni preservando il loro ordine gerarchico :)
cmq ho provato a validare la home qui
http://www.totalvalidator.com/index.html
e supera le 3A delle wgac2!
http://www.signalkuppe.com
Sono disorientati i menu 4 colonne in alto il ftto che si sposti così tanto.. io cercherei di tenere il blocco abbastanza sotto alla tab che lo ha aperto.. non so se mi spiego :P
Ciao
Marco
--
My blog
Working at @agavee
bleah che schifo :S
e poi tutto scopiazzato dal genesis... anzi no dal beginning 2.0
@lioz: a me una cosa che piace molto è il layout semi-fluido-fixed.
Ovvero na cosa del tipo
#wrapper{
width:95%;
max-width:1280px;
}
in modo che se si hanno monitor grandi, non si sballa troppo il layout :-)
Fai un piacere....abbiamo capito che non lo utilizzerai, a questo punto lascia stare i commenti non produttivi.
Stay hungry, stay drupaled
ottima idea la metto nelle features! ;) mettiamo anche il min-width?
anche se non sarà supportata da ie<7 credo..pazienza :)
http://www.signalkuppe.com
ottimo suggerimento eliosh :)
ho messo tre classi aggiuntive per scegliere la larghezza massima
1) False Liquid 1280 -> <body class="liquid short">2) False Liquid 1440 -> <body class="liquid medium">
3) False Liquid 1680-> <body class="liquid long">
online per ora la 1
http://www.signalkuppe.com/templates/new/
http://www.signalkuppe.com
no non me ne vado, voglio vedere come va a finire questa storia...
Con min-width ci sono problemi di visualizzazione nella finestra di fckeditor (per chi lo usa).
ciao
www.gmpe.it
@lioz: mai pensato di inserire la struttura secondo specifche html5 ed eventualmente un JS per renderla compatibile con IE6?
Ciao
Marco
--
My blog
Working at @agavee
azz ma non è troppo così? nel senso non ho ancora ben capito il supporto di html5 nei vari browser..finchè si tratta di css3 (che tocca solo il design) ma rendere anche la struttura con i nuovi standard..boh..cmq ci penso!
sono sempre più orientato nel non utilizzare color, pone troppi vincoli sul layout..e comqunue non ha le stesse potenzialità di un subtheme..alla fine chi vuole modificare a fondo il tema lo fa creando un subtheme. Avendo anche separato i css l'ovveride di singole caratteristiche dovrebbe risultare semplice e veloce.
a questo punto per mantenere le png avevo pensato di includere pngfix solo per ie6
<!--load pngfix only for ie6--><!--[if IE 6]>
<script type="text/javascript" src="js/pngFix/jquery.pngFix.js"></script>
<script>
$(document).ready(function(){
$(document).pngFix();
});
</script>
<![endif]-->
http://www.signalkuppe.com
bhé alcune funzionalità di HTML5 sono già supportate da quasi tutti i browser... :)
Ciao
Marco
--
My blog
Working at @agavee
mi hai incuriosito, effettivamente potrebbe essere una bella idea, soprattutto in termini di sviluppo futuro.
Ho visto che moderniz riesce a fare degradare html5 per i browser più vecchi.
Mi sa che faccio un tentativo :)
http://www.signalkuppe.com
Ma non hai ancora capito che del tuo misero commento ce ne frega ben poco?!?
E prima di tirare in ballo altre scemenze, guardati lo sviluppo e la popolarità di questo tema a che livelli è su drupal.org... http://drupal.org/project/themes?solrsort=sis_project_release_usage%20desc
http://drupal.org/project/usage/marinelli
FTFY
;)
Certified to Rock
E' un tema molto bello: complimenti!
Credo sia davvero ottima la scelta di riservare, nelle pagine interne del sito, l'intestazione h1 al titolo del nodo.
Da incompetente vorrei solo segnalare un aspetto che ho incontrato nel tema versione 2.
Utilizzando la barra dell'accessibilità per explorer o la web developer toolbar per Firefox incontro questo tipo di problema:
Quando visualizzo lo schema del documento (con la web developer toolbar) o la struttura delle intestazioni (con la barra dell'accessibilità) l'intestazione h1 non compare in cima, ma dopo degli h2.
Se un'intestazione è h1 questa, credo, dovrebbe stare all'inizio, non dopo degli h2.
Nel tema Genesis questo invece accade correttamente.
infatti quello che non capisco sono le specifiche wgac 2.0 sull'accessibilità. Secondo loro l'ordine delle intestazioni va preservato senza se e senza ma, quindi non potrei mai dare ai titoli dei blocchi che stanno sopra al content degli h2 (e questo neanche per i titoli dei link primari). A rigor di logica quindi solo i blocchi che stanno dopo il content in ordine di markup possono ricevere degli h2. Secondo me però ha poco senso visto che le intestazioni dovrebbero dare anche un'ordine di importanza tra le varie sezioni del sito più che limitarsi ad un ordine di markup...boh.
In conclusione per garantire il livello 2 delle wgac potrei quindi dare h2 solo alle sidebar lasciando come titoli degli altri blocchi dei
http://www.signalkuppe.com
x metro volevo dire che è inutile che mi dici che ha popolarita' e che è usato da molti per me è un tema for losers e basta, cè molto di meglio in giro, comunque postami il link esatto da dove si vede la popolarita' di un tema con le altre statistiche
Suggerisco:
Mi resta un dubbio su gli h1: ce ne deve essere uno solo o anche due (uno per il nome del sito e uno per il nodo principale della pagina)? In questo sito, per esempio, ci sono due h1: http://d-theme.com/
Trovo interessante questa pagina:
http://drupal.org/node/44072
Ecco lo schema del documento di un sito di prova con il tema marinelli relativo ad una pagina interna intitolata "Upload prova"
Ecco lo schema del documento della stessa pagina del sito con il tema genesis
grazie Dany per la tua risposta!
Io sarei per un solo h1 per pagina. In home metterei h1 per il titolo del sito, h2 per i titoli dei teaser e h3 per i blocchi della sidebar, mentre p per tutti gli altri blocchi.
nelle interne h1 per il titolo del nodo h2 per i blocchi della sidebar e p per tutti gli altri.
Il problema è che mettendo h2 anche per gli altri blocchi si perde la gerarchia nel documento (nel codice vengono prima del content ed avremmo un h2 prima di un h1).
Questa è una linea guida delle wcag2 che davvero non capisco, anche perchè sarebbe utile mettere ad esempio le voci di primo livello del menu dei primary dentro a degli h2 per facilitare la navigazione da screen reader. boh.
http://www.signalkuppe.com
@lioz: puoi spostare il markup per avere tutte le regioni dopo il content, DELIRIOSO da sistemare e mantenere, ma teoricamente fattibile.
Il problema dei titoli dei blocchi è che effettivamente: Non sono significativi (nella maggior parte dei casi) per il contenuto, ma si limitano a dare importanza ad alcuni elementi (search, login, ...) che effettivamente NON sono informazioni inerenti alla pagina.
Concordo che le WCAG2 su sto punto non convincono nemmeno me.
Ciao
Marco
--
My blog
Working at @agavee
h1 e h2.
Se osservi l'immagine dello schema del documento con il tema Genesis, ti accorgi che il titolo del nodo della pagina interna del sito è marcato come h1 ed è in cima alla gerarchia delle intestazioni.
Tutto il resto viene dopo.
Io credo che in questo modo la struttura, e la semantica, sia pià corretta, utile e forse anche più redditizia dal punto di vista del posizionamento nei motori di ricerca.
I non vedenti che navigano con screen reader si trovano posizionati subito sull'oggetto principale della pagine: il titolo del nodo in questione e non su altre decine di blocchi marcati come h2.
Non sono d'accordo nell'assegnare h3 ai blocchi della sidebar: logicamente h3 è figlio di h2. I blocchi quindi non sono figli dei teaser dei nodi h2.
Sono invece d'accordo che bisognerebbe marcare come h2 (nascosto) anche i menu di navigazione primari (andrebbero poi marcati di conseguenza anche i secondari).
effettivamente sono d'accordo con te sugli h3 dei blocchi.
@Mavimo: non puoi propormi certi deliri!!! :)
mi sa che procedo in questo modo fregandomene delle wgac2 che mi sembrano senza senso.
1) home (qui reggono le wcag2)
h1 - titolo sito
h2 - link di primo livello dei primary
h2 - titoli dei teasers
h2 - titoli blocchi sidebars
p - per tutti gli altri blocchi
2) interna
h1 - titolo nodo
h2 - link di primo livello nei primary
h2 - blocchi nella sidebar
p - per tuti gli altr blocchi
ho visto come legge uno screenreader le pagine e secondo me le intestazioni nel menu di primo livello sono utilissime!
http://www.signalkuppe.com
Ok per la struttura degli h1 h2!!!
Però fai attenzione alle wcag 2.0: su di esse si sta aggiornando l'elenco dei nuovi requisiti tecnici di accessibilità dei siti web pubblici ai sensi della legge Stanca del 2004.
Quindi se stai facendo un sito per un Comune... (ma può essere anche il sito di una banca con la quale paghi il canone rai o l'ici).
Pagine