Criteris i entregables per maquetes i noves webs estàtiques
Publicat per Oriol Roselló i Castells el 24/07/2013 - 13:18 | Última modificació: 20/05/2021 - 10:57
Taula de continguts
A continuació es detallen els requisits tècnics que han de complir els dissenys web o aplicacions web corporatius, així com els entregables que han de subministrar els proveïdors/dissenyadors/maquetadors:
1. Base de treball
- Es desenvoluparà en HTML5 sobre un sistema basat en retícules.
- S'ha d'utilitzar Bootstrap (versió 4):
- Això vol dir que s'ha de maquetar basant-se en el Grid System de Bootstrap (és a dir han d'aparèixer classes del tipus: class="row", class="col-*"). Igual que els botons i demés components que han de seguir les classes definides per Bootstrap.
- Els desenvolupaments .js que es necessitin s'han de fer en un fitxer .js a banda del de Bootstrap, per tal de poder actualitzar-ne o canviar-ne la versió posteriorment. I aquest fitxer de Bootstrap ha de ser amb la versió 'minimitzada' (bootstrap.min.js).
- El mateix passa amb els .css, haurien de ser dos fitxers separats: un amb els estils de bootstrap (bootstrap.min.css) i un l'altre o varis amb les personalitzacions fetes a mida.
- Aquesta separació de JSs/CSSs, ens permet carregar la base del Bootstarp directament del CDN, així accelerem la web. Per tant, quan sigui una web pública i no un intranet, servirem les principals llibreries (Bootstrap, jQuery, etc...) via CDN. Exemple:
-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> ... <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
- A l'hora de customitzar els .css propis es pot fer directament sobre CSS o amb SAAS.
- La primera línia de totes les pàgines serà: <!DOCTYPE html>
- El codi HTML ha de validar la seva estructura segons els criteris de la W3C: http://validator.w3.org
- El disseny ha de ser responsiu i adaptar-se als següents quatre salts (estàndard Bootstrap).
- Es requereix compatibilitat amb els següents navegadors:
- IE11 o superior.
- Chrome versió actual - 1.
- Firefox versió actual - 1.
- Safari versió actual - 1.
- Opera versió actual - 1.
- S'han de complir els criteris d'accessibilitat de les pautes WCAG 2.1 del W3C assolint el nivell AA. Validador: http://www.tawdis.net, Wave, etc.
- En tot moment durant el desenvolupament i l’execució del contracte es vetllarà pel compliment del Reglament de Protecció de Dades Personals. Això inclou, si s’escau, també la recollida de consentiment d’ús de les cookies per l’entorn del web i la recollida de dades personals en tots els formularis.
- A totes les planes del lloc web s’incorporarà un script pel seguiment amb Google Analytics/Google Tag Manager que serà proporcionat per la corporació.
- S'utilitzaran els rols WAI-ARIA per marcar les zones funcionals de la web: article / banner / complementary / contentinfo / main / navigation / search.
Exemple: <div id="logo" role="banner"> ... </div> - Es treballarà amb el joc de caràcters UTF-8 sense BOM.
- Podem validar la correcta utilització del Bootstrap amb el bootlint: http://www.bootlint.com
2. Contrast de colors (fons/text)
- El contrast de colors ha de complir la WCAG AA i cal validar que el text i el fons estan suficientment contrastats. Es pot utilitzar un validador online, com per exemple: ContrastChecker.
3. Sobre el HTML
- Per garantir la compatibilitat amb tots els dispositius s'inclouran sempre les següents directius en el head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="HandheldFriendly" content="true" />
4. Sobre les CSSs
- S'utilitzarà un reset d'estils multinavegador. Es recomana normalize.css (si es maqueta amb Boostrap ja no cal).
- Tots els estils han d'estar fora del codi HTML i en fitxers .css. No s'utilitzen estils incrustats al html ni estils directament al head.
- Es recomana validar la qualitat del codi amb http://csslint.net i seguir les seves recomanacions.
- Evitem especialment l'ús i sobre-ús del !important, cal treballar amb l'especifitat.
- S'ha de suministrar disseny i estils per a tots els elements HTML:
- Taules (table)
- Llistes de definició (dl, dt, dd)
- Text:
- Tipografies i cos de lletra
- Encapçalaments (h1, h2, h3, h4, h5, h6)
- Estats dels vincles (hover, active...)
- Avisos (text destacat)
- Llistes (ul,ol...)
- Formularis (label, input, select, fieldset, textarea, checkbox...)
- Botons
- etc...
5. Sobre el JS
- Tot el javascript han d'estar fora del HTML en fitxers .js. Queda prohibit l'ús de javascript inline.
- Tot el javascript ha de ser no-intrusiu i executar-se després de l'event ready() o window.onload.
- Molt important! El desenvolupament en javascript es farà tot sota la directiu: "use strict";
- Es recomana validar la qualitat del codi amb http://jslint.com i seguir les seves recomanacions.
6. Entregables
Els entregables d'una maqueta per un nou disseny seran:
- Fixers de treball amb .psd o similars.
- Pàgina maquetada amb HTML/CSS/JS del layout i una mostra de tots els elements HTML disponibles (llista, taula, títols, formularis, botons, avisos, etc...).
- Pàgina maquetada amb HTML/CSS/JS per cada tipus diferent de pàgina que contempli el disseny. Alguns exemples típics són:
- Portada.
- Plana interior.
- Plana interior amb desplegables.
- Plana interior amb menú a l'esquerra.
- Plana interior amb columnes.
- Plana interior amb formularis.
- Plana de resultats de cerca.
- etc.
Cas que l'encàrrec sigui una nova web l'entregable serà directament la nova web amb tots els arxius necessaris pel seu funcionament.
- 3447 lectures
