Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924

    Un decalogo per lo sviluppo di template (templating guidelines)

    Per esigenze lavorative mi sono trovato a dover stilare una specie di decalogo che consenta di valutare un lavoro prodotto esternamente e che metta dei paletti qualitativi al codice su cui devo lavorare.

    L'idea è stata quella di creare delle linee guida generali, in grado di prevenire i maggiori problemi con cui spesso mi scontro (perlopiù pratiche di cattiva progettazione).

    Ne è uscita una lista che, ripeto, non ha la pretesa di avere il dono della completezza, (penso sia utopico pensare di creare una lista esaustiva) nè di essere il decalogo perfetto, ma è ciò che mi serve ed è ciò che mi aspetto da chi lavora con/per me. Inoltre sono linee guida che io stesso cerco di rispettare ad ogni progetto.


    Mi rivolgo quindi a chi ha qualche anno di esperienza nello sviluppo:
    qual è il vostro decalogo personale?



    Di seguito il mio:


    1 – Ogni pagina deve dichiarare un doctype XHTML Strict 1.0 e il codice XHTML contenuto deve essere valido in accordo a tale doctype. Il codice CSS dovrebbe essere aderente se e quando possibile alle specifiche del linguaggio.

    2 – Il codice css deve essere applicato alla pagina mediante inclusione (non incorporato né inline). Lo stesso vale per eventuale codice javascript anche se un numero minimo di istruzione inline (meno di 4/5) e per pochi elementi, è accettabile.

    3 – Gli elementi che non apportano signficato semantico alla pagina devono essere trattati come background o altre proprietà con i fogli di stile e non come elementi di primo piano o testo*. Ne sono esempio ricorrente i bordi curvi che permettono di delimitare delle aree, linee di separazione tra voci di menu orizzontale, frecce o marker sui link, gli spazi tra i vari elementi che devono essere gestiti tramite margini o padding.

    Non sono tollerabili immagini spaziatrici o spazi testuali che servano a solo scopo presentazionale.

    Sono invece immagini di primo piano gli elementi grafici che a) possono essere cliccati o cliccabili (ad es. un logo, un pulsante); b) elementi, anche non cliccabili, purché rilevanti per la comprensione del testo (ad es. un organigramma aziendale, lo schema di un processo produttivo).

    *(In caso di immagini .png l’uso può essere valutato caso per caso).

    4 – Il layout non deve essere costruito mediante a tabelle, ma definito con generici macroblocchi. Le tabelle vanno utilizzate esclusivamente per dati che siano naturalmente in relazione di riga/colonna con riepilogo di riga e/o colonna (un orario scolastico, un bilancio, le voci del carrello di un e-shop prima del checkout). I form non devono essere costruiti a tabelle salvo esplicite eccezioni.

    5 – Il layout dev’essere costruto cercando di rispettare il significato delle informazioni in esso contenuto evitando quando possibile un uso eccessivo o superfluo di elementi generici: un menu, ad esempio, è una lista non ordinata di link, l’indirizzo di un’azienda può essere racchiuso dal tag [address], i titoli in pagina vanno gestiti con gli appositi header h1…h6. Inoltre il layout va costruito in modo da non pregiudicarne l’integrità in caso di una ragionevole espansione dei testi in verticale (ad es. quando il carattere del browser viene ingrandito o aumentano le voci di un menu verticale)

    6 – Raggruppamento degli stili: id e/o classi non dovrebbero essere applicati a troppi elementi in pagina poiché potrebbero generare eccessivo disordine e creare dei conflitti con stili applicati successivamente. La struttura del codice e i marcatori stessi, inoltre, dovrebbero essere usati per creare regole CSS discendenti a partire da un’unica classe e/o elemento (ad es. #menu, #menu li, #menu li a, menu li a:hover)

    7 – Significato degli stili: è consigliato evitare l’uso di nomi di id e classi che riflettano l’aspetto presentazionale, in favore di significati semantici e immediatamente comprensibili. Evitare ad esempio di chiamare una classe ‘testorosso’ o ‘titolo20px’.

    8 – Font non di sistema: va concordata preventivamente la gestione di testi con font non di sistema per poter consentire un’eventuale localizzazione successiva o la loro semplice gestione senza elementi grafici.

    9 – Indicizzabilità: il codice utilizzato non deve pregiudicare in alcun modo una normale indicizzazione della pagina da parte dei motori di ricerca: il testo nascosto è tollerato per pochi elementi testuali e, qualora dovesse essere applicato a titoli di primo livello e/o a link, l’uso dev’esserne preventivamente concordato.

    10 – I commenti al codice non sono espressamente richiesti, ma la loro presenza – soprattutto in caso di lunghi blocchi di codice – è consigliabile ed apprezzata (soprattutto per indicare la fine e l’inizio di un blocco)

    Nota bene: La lista dei browser per cui è richiesta la compatibilità è descritta nell'allegato ... [omissis]


    Cosa cambiereste o aggiungereste in questo decalogo?
    Qual è il vostro decalogo?

    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  2. #2
    11. I file devono essere ben organizzati: i fogli di stile devono stare tutti in un folder. I JS in un'altro. Le immagini in un'altro ancora e possibilmente suddvise a loro volta in altri folder (grafica, contenuto, tipo di contenuto se il numero è molto grande);

    12. Se hanno grosse dimensioni i JS devono essere compressi;

    13. Le proprietà fra { e } nel foglio di stile non devono essere inline; Possibilmente dividere con una linea di commento i gruppi di regole, per esempio quelle della sidebar da quelle del footer.

    14. Per risolvere i problemi con IE non usare hack ma i commenti condizionali;

  3. #3
    Originariamente inviato da gabip87
    11. I file devono essere ben organizzati: i fogli di stile devono stare tutti in un folder. I JS in un'altro. Le immagini in un'altro ancora e possibilmente suddvise a loro volta in altri folder (grafica, contenuto, tipo di contenuto se il numero è molto grande);

    12. Se hanno grosse dimensioni i JS devono essere compressi;

    13. Le proprietà fra { e } nel foglio di stile non devono essere inline; Possibilmente dividere con una linea di commento i gruppi di regole, per esempio quelle della sidebar da quelle del footer.

    14. Per risolvere i problemi con IE non usare hack ma i commenti condizionali;
    Integrazione alla 1 (banalità, ma la dico): È fatto divieto di utilizzare frame e iframe.

    Integrazione alla 8: prevedere sempre almeno 2 font di una stessa famiglia + una famiglia di font (serif, sans...)

    Integrazione alla 10: il codice deve essere leggibile, quindi, oltre ai commenti, negli script devono essere presenti le indentazioni corrette nel caso siano presenti dei cicli.

    15. Verificare che il layout rimanga leggibile anche in caso di ingrandimento del carattere (io di solo verifico sino a due ingrandimenti con Firefox).

    16. (forse chiedo troppo?) Prevedere una corretta visualizzazione anche su dispositivi mobili (handheld) e su stampa (print). Prevedere, se necessario, dei fogli di stile "ad hoc".

  4. #4
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    Queste sono (valide) integrazioni ma il mio scopo era capire quale fosse la vostra specifica lista di 10 priorità per il templating e capire per altri web designer cosa è assolutamente necessario per stare nella lista.

    Elencarne più di 10 a mio avviso sarebbe controproducente perchè imporre troppe regole (per molti purtroppo queste sono anche regole restrittive) significherebbe in qualche modo sfiduciare in partenza la persona (o azienda) con cui si deve collaborare e ciò può danneggiare rapporto di lavoro e produttività.

    E' per questo che mi sono limitato a 10 macroregole che siano linee guida generali ma in qualche modo che evitino errori gravi a monte

    Nel mio caso la regola 1 chiede il rispetto di un determinato doctype: molto semplice come linea guida, però di fatto evito di trovarmi dei template con elementi e attributi presentazionali e anche di frames (quel doctype non me lo permette), di codice malformato e non validato. E riesco ad ottenere ciò con una sola semplice "regola".


    Ancora l'ordine delle regole o la suddivisione dei file per quanto sia utile ed importante non è priorità specifica solo del templating, ma qualsiasi lavoro che preveda una consegna di più file dovrebbe essere ordinato.

    Per me infatti il commento sul codice, per quanto importante, è messo alla fine perchè in fondo qualsiasi progetto software (non solo lo sviluppo di pagine per il web) dovrebbe essere non solo adeguatamente commentato ma prevedere documentazione che quasi mai si produce. E' inutile chiedere ad altri la perfezione se noi stessi non possiamo garantirne altrettanta sempre e comunque: figuriamoci chiederla a qualcuno che collaborerà con noi saltuariamente.

    La compressione dei file js è altrettanto importante ma a mio parere non è parte integrante del templating in sè, ma è un'ottimizzazione che dev'essere fatta successivamente in fase di integrazione (compressione fatta lato server con mod_gzip o mod_deflate).

    Al massimo, ecco, eviterei di encodare il javscript ed eseguirlo con un eval. questo assolutamente sì.


    @panta: la 15 è gia compresa nei miei punti, la 16 dipende dal tipo di progetto che devi affrontare ed è compresa nella lista di compatibilità che alleghiamo
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.