MADES - juntaex.es · De aplicación a los proveedores y responsables de proyectos de sistemas de...

Consejería de Hacienda y Administración Pública

Dirección General de Tecnologías de la Información y Comunicación

MADES

Convenio de codificación en HTML y CSS

06/03/2018

Queda prohibido cualquier tipo de explotación y, en particular, la reproducción, distribución, comunicación pública y/o transformación,total o parcial, por cualquier medio, de este documento sin el previo consentimiento expreso y por escrito de la Consejería de Hacienda yAdministración Pública de la Junta de Extremadura.



Avda. Valhondo S/NEdificio III MilenoMódulo 2 - 3ª planta06800 - Mérida

JUNTA DE EXTREMADURA

MADES

Convenio de codificación en HTML yCSS

HOJA DE CONTROL

Proyecto MADES (Marco para el Desarrollo y Mantenimiento de los S.I.)

Documento Convenio de codificación en HTML y CSS

Nombre del Fichero MADES - Convenio de codificación en HTML y CSS.odt

Autor

Versión/Edición 1.0 Fecha Versión 06/03/2018

Aprobado por Fecha Aprobación

REGISTRO DE CAMBIOS

Versión Causa del Cambio Responsable del Cambio Área Fecha del Cambio

CONTROL DE DISTRIBUCIÓN

Nombre y Apellidos Cargo Área Nº Copias

Página 2 de 21





MADES


ÍNDICE

1 INTRODUCCIÓN ........................................................................................................ 4

1.1 Objetivo ............................................................................................................................................... 4 1.2 Alcance ................................................................................................................................................. 4 1.3 Ámbito de Responsabilidades ......................................................................................................... 4 1.4 Revisión de la Norma ....................................................................................................................... 4 1.5 Publicación de la Norma .................................................................................................................. 4

2 GENERAL ....................................................................................................................... 5

2.1 Reglas de Estilo General .................................................................................................................. 5 2.2 Reglas de Formato Generales ........................................................................................................ 5 2.3 Reglas Meta Generales ..................................................................................................................... 7

3 HTML ............................................................................................................................... 9

3.1 Reglas de Estilo HTML ..................................................................................................................... 9 3.2 Reglas de Formato HTML ............................................................................................................. 13

4 CSS ................................................................................................................................. 15

4.1 Reglas de Estilo CSS ....................................................................................................................... 15 4.2 Reglas de Formato CSS Formatting Rules ................................................................................ 19 4.3 Reglas Meta en CSS ........................................................................................................................ 22

Página 3 de 21





MADES


1 INTRODUCCIÓN

1.1 Objetivo

El objetivo del documento es definir las reglas de formato y estilo para losdocumentos HTML y CSS. Su objetivo es el de mejorar la colaboración, la calidad del códigoy habilitar la infraestructura de apoyo. Se aplica a los ficheros de trabajo sin procesar queutilizan HTML y CSS.

1.2 Alcance

Todos los proyectos de desarrollo y mantenimiento de sistemas de información entecnología web de la DGTIC.

1.3 Ámbito de Responsabilidades

De aplicación a los proveedores y responsables de proyectos de sistemas deinformación de la DGTIC, así como por la unidad responsable de calidad que velará por sucumplimiento en cada sistema o aplicación.

1.4 Revisión de la Norma

La norma que describe el Marco de Desarrollo de Sistemas de Información de laDGTIC, desarrollada en este documento será revisada de forma anual, para adaptar, corregiry ampliar en su caso tanto su alcance como su contenido. La unidad competente de laDGTIC será quien determine los responsables de la revisión, adaptación y modificación de lanorma.

1.5 Publicación de la Norma

El presente documento, así como las revisiones, serán de dominio público y sepondrá a disposición de cualquier ciudadano interesado utilizando los medios que la DGTICestime oportunos, preferentemente a través de Internet, desde los portales de informaciónque la Junta de Extremadura tiene de acceso público.

Página 4 de 21

MADES


2 GENERAL

2.1 Reglas de Estilo General

Protocolo

Donde sea posible, se DEBERÍA usar el protocolo HTTPS para los recursosembebidos. Se DEBERÍA utilizar el protocolo HTTPS (https:) para las imágenes y otrosficheros multimedia, ficheros de hojas de estilo y ficheros de script, a menos que esosficheros no estén disponibles sobre HTTPS.

<script src="//micdn.es/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="http://micdn.es/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://micdn.es/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

/* No recomendado: omite el protocolo */@import '//fonts.googleapis.com/css?family=Open+Sans';

/* No recomendado: usa el protocolo HTTP */@import 'http://fonts.googleapis.com/css?family=Open+Sans';

/* Recomendado */@import 'https://fonts.googleapis.com/css?family=Open+Sans';

2.2 Reglas de Formato Generales

Sangría

Se DEBE utilizar un sangrado de 4 espacios. NO DEBEN utilizarse tabulaciones nimezclas entre tabulaciones y espacios.

<ul> <li>Fantastico

Página 5 de 21

MADES


<li>Increible</ul>.example { color: blue;}

Capitalización

Se DEBEN utilizar siempre las minúsculas. Todo el código DEBE estar en minúsculas:Esto es aplicable a los nombres de elementos HTML, atributos, valores de atributos (almenos text/CDATA), selectores CSS, propiedades y valores de propiedades (con laexcepción de cadenas de texto).

<A HREF="/">Inicio</A>

<img src="user.png" alt="Usuario">

/* No recomendado */color: #E5E5E5;

/* Recomendado */color: #e5e5e5;

Espacios en blanco sobrantes

Los espacios en blanco al final de cada línea DEBEN eliminarse. Estos espacios no sonnecesarios y pueden complicar cualquier proceso de comparación entre ficheros.

<p>Usuario_<p>Nombre de usuario

Página 6 de 21





MADES


2.3 Reglas Meta Generales

Codificación

DEBE utilizarse UTF-8 (no BOM) para codificar los ficheros HTML y CSS. Hay queasegurarse de que el editor utiliza UTF-8 como codificación de caracteres por defecto, sinmarca de orden de bytes.

Se DEBE especificar la codificación en las plantillas y documentos HTML utilizando laetiqueta:

<meta charset="utf-8">

NO se DEBE especificar la codificación en las hojas de estilo ya que éstas asumen quela codificación es UTF-8.

Comentarios

Se PUEDE explicar el código utilizando comentarios cuando sea necesario, donde seaposible, pero no hace falta hacerlo con el código que es evidente. Se asume que el mejorcomentario es el que no existe.

Si es imprescindible, se DEBE tener especial cuidado en que el contenido delcomentario no se desfase con respecto al código comentado.

Elementos de Acción

Se PUEDEN marcar los elementos por hacer y las acciones con la etiqueta metaTODO.

Se PUEDEN destacar los elementos por hacer solo con la palabra clave TODO, peroNO DEBE destacarse con ningún otro formato común como @@.

Se PUEDE incluir un contacto (nombre de usuario o lista de correo) entre paréntesiscon el formato TODO(contacto).

Se PUEDEN incluir elementos de acción después de los dos puntos TODO:elemento de acción.

Página 7 de 21

MADES


{# TODO(juan.diaz): revisar centrado #}<center>Test</center><ul> <li>Manzanas</li> <li>Naranjas</li></ul>

Página 8 de 21

MADES


3 HTML

3.1 Reglas de Estilo HTML

Tipo de Documento

Se DEBE utilizar HTML5 (sintaxis HTML). Todos los documentos HTML debenempezar con la etiqueta meta <!DOCTYPE html>.

Los documentos HTML DEBEN utilizar un tipo MIME text/html. NO DEBE utilizarsenunca XHTML, application/xhtml+xml.

NO DEBEN cerrarse los elementos vacíos, p.ej.: hay que usar <br> en lugar de <br>.

HTML Válido

DEBE utilizar HTML válido donde sea posible. Para validar el código, PUEDENutilizarse herramientas como W3C HTML validator (https://validator.w3.org/nu).

Utilizar HTML válido es un atributo básico de calidad, medible, que contribuye en elaprendizaje sobre los requerimientos y restricciones técnicas y que asegura un usoapropiado de HTML.

<title>Prueba</title><article>Esto es solo una prueba

<!DOCTYPE html><meta charset="utf-8"><title>Prueba</title><article>Esto es solo una prueba</article>

Semántica

DEBEN utilizarse los elementos HTML para la función para la que fueron creados.Por ejemplo, elementos de cabecera para las cabeceras, elementos p para los párrafos,

Página 9 de 21

https://validator.w3.org/nu

MADES


elementos a para los enlaces, etc. Usar HTML según su propósito es importante por razonesde accesibilidad, reutilización y eficiencia del código.

<div onclick="goToRecommendations();">Todas las recomendaciones</div>

<a href="recomendaciones/">Todas las recomendaciones</a>

Contenidos Alternativos

DEBEN proporcionarse contenidos alternativos para los elementos multimedia. Paraelementos tales como imágenes, videos, objetos animados vía canvas, hay que asegurarse deproporcionar un acceso alternativo. Para imágenes con significado, se DEBE utilizar textoalternativo (alt) y para elementos de video o audio se DEBE utilizar transcripciones ysubtítulos, si están disponibles.

Proporcionar contenidos alternativos es importante por razones de accesibilidad: Unusuario invidente tiene pocas evidencias para saber qué contiene una imagen sin un elementoalt, y otros usuarios pueden no tener forma de comprender lo que un audio o video intentatransmitir.

NO DEBEN utilizarse atributos alt en imágenes cuando su contenido introduceredundancias o su propósito es puramente decorativo.

<img src="hojadecalculo.png"><img src="hojadecalculo.png" alt="Captura de pantalla de una hoja de cálculo.">

Separación de Responsabilidades

DEBE separarse la estructura de la presentación y del comportamiento.

DEBE mantenerse estrictamente separadas la estructura (marcado), la presentación(estilo) y el comportamiento (scripting) y DEBERÍA mantenerse la mínima interacción entrelas tres. Es decir, hay que asegurarse de que los documentos y plantillas contienen HTML ysolo HTML que solo sirven a propósitos únicamente estructurales. Hay que mover toda lapresentación a hojas de estilo y todo el comportamiento a scripts. Además, hay quemantener un área de contacto lo más pequeña posible enlazando desde los documentos y lasplantillas tan pocas hojas de estilo y pocos scripts como sea posible.

Página 10 de 21

MADES


Separar la estructura de la presentación y el comportamiento es importante porrazones de mantenimiento. Siempre es más costoso cambiar documentos y plantillas HTMLque actualizar hojas de estilo y scripts.

<!DOCTYPE html><title>HTML no deseable</title><link rel="stylesheet" href="base.css" media="screen"><link rel="stylesheet" href="grid.css" media="screen"><link rel="stylesheet" href="print.css" media="print"><h1 style="font-size: 1em;">HTML no deseable</h1><p>Usar HTML sin separar responsabilidades <u>No es deseable</u><center>Puede provocar auténticos desastres de mantenimiento</center><!DOCTYPE html><title>Mi primer rediseño de CSS</title><link rel="stylesheet" href="default.css"><h1>Mi primer rediseño de CSS</h1><p>Separar responsabilidades es un ejercicio de responsabilidad<p>¡Es muy recomendable!

Referencias de Entidad

NO DEBEN utilizarse referencias de entidad. No existe la necesidad de usarreferencias de entidad como —, ”, o ☺, asumiendo que se utiliza lamisma codificación (UTF-8) para los ficheros, los editores de código y entre equipos dedesarrolladores.

La única excepción se aplica a los caracteres con un significado especial en HTML(como < y &) así como los caracteres de control o caracteres “invisibles”.

El símbolo monetario para el Euro es “&eur;”.

El símbolo monetario para el Euro es “ ”.€

Etiquetas Opcionales

Se PUEDEN omitir las etiquetas opcionales (optional).

Página 11 de 21

MADES


Para optimizar el tamaño de los ficheros y facilitar la exploración PUEDEN omitirselas etiquetas opcionales. La especificación de HTML5(https://whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission) define qué etiquetas pueden ser omitidas.

<!DOCTYPE html><html> <head> <title>Gastando recursos</title> </head> <body> <p>Ejemplo</p> </body></html><!DOCTYPE html><title>Optimizando recursos</title><p>Ejemplo

Atributos type

DEBEN omitirse los atributos type para las hojas de estilo y los scripts. No hay queutilizar este atributo para hojas de estilo a menos que no use CSS y tampoco para scripts sino se va a usar Javascript.

En estos contextos, no es necesario especificar el atributo type ya que HTML5interpreta por defecto que son text/css y text/javascript.

<link rel="stylesheet" href="https://midominio.es/css/maia.css" type="text/css">

<link rel="stylesheet" href="https://midominio.es/css/maia.css">

<script src="https://midominio/js/analytics/autotrack.js" type="text/javascript"></script>

<script src="https://midominio.es/js/analytics/autotrack.js"></script>

Página 12 de 21

https://whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission

https://whatwg.org/specs/web-apps/current-work/multipage/syntax.html#syntax-tag-omission

MADES


3.2 Reglas de Formato HTML

Formato General

DEBE utilizarse una nueva línea para cada bloque, lista o tabla y sangrar cadaelemento secundario. Hay que poner cada uno de estos elementos en una nueva líneaindependientemente del estilo de cada uno (CSS permite que los elementos asumandiferentes roles según la propiedad display). Si a su vez son elementos secundarios de unbloque, lista o tabla, habrá que incluir 2 espacios.

<blockquote> <p><em>Espacio</em>, la última frontera.</p></blockquote>

<ul> <li>El bueno <li>El feo <li>El malo</ul>

<table> <thead> <tr> <th scope="col">Income <th scope="col">Taxes <tbody> <tr> <td>$ 5.00 <td>$ 4.50</table>

Comillas en HTML

DEBEN utilizarse comillas dobles ("") para los valores de los atributos en lugar decomillas simples ('').

<a class='btn btn-primary'>Enviar</a><a class="btn btn-primary">Enviar</a>

Página 13 de 21





MADES


4 CSS

4.1 Reglas de Estilo CSS

CSS Válido

DEBE usarse siempre un CSS válido. Para comprobar la validez del contenido CSS,hay que utilizar herramientas de validación, como el servicio de validación CSS de la W3C(https://jigsaw.w3.org/css-validator). Utilizar un CSS válido es un atributo base de calidadmedible que permite detectar código CSS que no tiene ningún efecto, por lo que se puedeeliminar y asegura un uso apropiado de CSS.

Nombre de Clase e ID

DEBEN utilizarse nombres de clases e ID significativos o genéricos. En lugar deutilizar nombres crípticos o de presentación, hay que utilizar siempre nombres de ID y declases que reflejen el propósito del elemento en cuestión, o que sean genéricos de algunaforma. Son preferibles los nombres que son específicos y reflejan el propósito del elementodebido a que son más comprensibles y menos probables de que cambien.

Los nombres genéricos abarcan a aquellos elementos que no tienen un significado enparticular o ninguno diferente de sus adyacentes o hermanos. Utilizar nombres funcionales ogenéricos reduce la probabilidad de cambios innecesarios en documentos o plantillas.

/* No recomendado: sin significado*/#yee-1901 {}

/* No recomendado: de presentación */.button-green {}.clear {}

/* Recomendado: específicos */#gallery {}#login {}.video {}

/* Recomendado: genéricos */.aux {}.alt {}

Página 14 de 21

https://jigsaw.w3.org/css-validator





MADES


Estilo de ID y Nombre de Clase

DEBEN utilizarse nombres de ID y clases que sean tan cortos como sea posible y tanlargos como sea necesario. Hay que intentar expresar qué es un ID o clase siendo lo másbreve posible.

Usando nombres de ID y clases de esta manera, se contribuye a conseguir nivelesaceptables de comprensión y eficiencia del código.

/* No recomendado */#navigation {}.atr {}

/* Recomendado */#nav {}.author {}

Selectores de Tipo

NO DEBERÍAN usarse nombres de ID y clases con selectores de tipo. Al menos quesea estrictamente necesario, no se deben utilizar nombres de elementos en conjunción conclases o ID. Por razones de rendimiento, es útil evitar el uso de selectores ancestrales.

/* No recomendado */ul#ejemplo {}div.error {}

/* Recomendado */#ejemplo {}.error {}

Propiedades Abreviadas

DEBERÍAN utilizarse propiedades abreviadas donde sea posible. CSS proporcionauna gran variedad de propiedades abreviadas (como font) que deberían utilizarse donde seaposible, incluso en aquellos casos en los que utilice un único valor. El uso de las propiedadesabreviadas es útil para la eficiencia del código y la comprensión.

/* No recomendado */

Página 15 de 21





MADES


border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2em;padding-left: 1em;padding-right: 1em;padding-top: 0;

/* Recomendado */border-top: 0;font: 100%/1.6 palatino, georgia, serif;padding: 0 1em 2em;

Unidades con valor 0

DEBE omitirse la especificación de unidades después de atributos o propiedades convalor 0, excepto cuando sea estrictamente necesario.

flex: 0px; /* Este componente requiere especificar la unidad. */flex: 1 1 0px; /* No ambiguo sin la unidad, pero necesario en IE11. */margin: 0;padding: 0;

Ceros a la izquierda

DEBERÍAN omitirse los ceros que se encuentren a la izquierda de valores. NO seDEBERÍAN poner ceros delante de aquellos valores que se encuentren entre -1 y 1.

font-size: .8em;

Notación Hexadecimal

DEBERÍA utilizarse una notación hexadecimal de 3 caracteres donde sea posible. Esposible utilizar esta anotación para acortar los valores de color que lo permitan.

/* No recomendado */color: #eebbcc;

/* Recomendado */

Página 16 de 21





MADES


color: #ebc;

Prefijos

PUEDE incluirse un prefijo específico de aplicación en los selectores. En proyectosrelativamente grandes, para código embebido en otros proyectos o sitios externos, sePUEDEN usar prefijos (como espacios de nombre) para los ID y los nombres de clase. Hayque utilizar identificadores cortos y únicos seguidos por un guión.

Usar espacios de nombre previene la aparición de conflictos de nombres y hace elmantenimiento más fácil, por ejemplo para operaciones de búsqueda y reemplazo.

.adw-help {} /* AdWords */#maia-note {} /* Maia */

Delimitadores de ID y Nombres de Clase

DEBEN separarse las palabras de ID y nombres de clase con un guión. Para mejorarla comprensión y las búsquedas, NO DEBEN concatenarse palabras y abreviaturas en losselectores usando cualquier otro carácter que no sea un guión.

/* No recomendado: no separar las palabras */.demoimage {}

/* No recomendado: usar guión bajo en lugar de guión medio */.error_status {}/* Recomendado */#video-id {}.ads-sample {}

4.2 Reglas de Formato CSS Formatting Rules

Orden de Declaración

DEBERÍAN ordenarse alfabéticamente las declaraciones para obtener un códigoconsistente que sea fácil de recordar y mantener.

DEBEN ignorarse los prefijos específicos de terceros para ordenar. Sin embargo,DEBERÍAN mantenerse ordenados aquellos prefijos múltiples, específicos de terceros, parauna determinada propiedad CSS (p.ej.: -moz va antes que -webkit).

Página 17 de 21





MADES


background: fuchsia;border: 1px solid;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;color: black;text-align: center;text-indent: 2em;

Sangría de Contenido en Bloque

DEBE sangrarse todo el contenido en bloque, es decir, tanto las reglas dentro de lasreglas como las declaraciones para reflejar la jerarquía y mejorar la comprensión.

@media screen, projection { html { background: #fff; color: #444; }}

Fin de Declaración

DEBE utilizarse un punto y coma después de cada declaración, por razones deconsistencia y extensibilidad.

/* No recomendado */.test { display: block; height: 100px}

/* Recomendado */.test { display: block; height: 100px;}

Página 18 de 21





MADES


Fin de Nombre de Propiedad

DEBERÍA usarse un espacio a continuación de los dos puntos del nombre de unapropiedad, pero NO DEBERÍA haber un espacio entre la propiedad y los dos puntos, porrazones de consistencia.

/* No recomendado */h3 { font-weight:bold;}

/* Recomendado */h3 { font-weight: bold;}

Separación de Declaración de Bloques

DEBERÍA utilizarse un espacio entre el último selector y la llave de apertura delbloque de declaración. La llave de apertura de declaración DEBERÍA estar en la misma líneaque el selector en una regla dada.

/* No recomendado: sin espacio */#video{ margin-top: 1em;}/* No recomendado: salto de línea innecesario */#video{ margin-top: 1em;}/* Recomendado */#video { margin-top: 1em;}

Separación de Selector y Declaración

DEBERÍAN separarse selectores y declaraciones en varias líneas, concretamente conuna nueva línea por cada selector y declaración.

Página 19 de 21





MADES


/* No recomendado */a:focus, a:active { position: relative; top: 1px;}/* Recomendado */h1,h2,h3 { font-weight: normal; line-height: 1.2;}

Separación de Reglas

DEBERÍAN separarse las reglas con líneas en blanco.

html { background: #fff;}

body { margin: auto; width: 50%;}

Comillas en CSS

DEBEN usarse comillas simples para los selectores de atributo y los valores depropiedad. NO DEBEN utilizarse comillas en los valores URI (url()).

/* No recomendado */@import url("https://www.juntaex.es/css/bootstrap.css");

html { font-family: "open sans", arial, sans-serif;}

/* Recomendado */@import url(https://www.juntaex.es/css/bootstrap.css);

html { font-family: 'open sans', arial, sans-serif;

Página 20 de 21





MADES


}

4.3 Reglas Meta en CSS

Sección Comentarios

PUEDEN agruparse secciones de estilos con un comentario por sección. PUEDENsepararse cada sección con líneas en blanco.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Página 21 de 21

MADES - juntaex.es · De aplicación a los proveedores y responsables de proyectos de sistemas de...

Documents

Transcript of MADES - juntaex.es · De aplicación a los proveedores y responsables de proyectos de sistemas de...