Cuando estamos programando en una web, debemos utilizar una serie de pautas para que el trabajo final sea lo mejor posible.

Actualmente se suele seguir el modelo marcado por PSR-2, por lo que especificaremos las reglas de este estándar para PHP junto a algunas otras específicas para Javascript y HTML.

Además también comentaremos algunas indicaciones genéricas para todos los lenguajes de programación.

Veamos cuáles son estas pautas:

Genéricas

• Con la finalidad de unificar formatos es importante realizar tanto las implementaciones como los comentarios en inglés.
  
  
• Cada desarrollador deberá comentar su código antes de subir cambios al repositorio. Al ir documentando el código durante el desarrollo evitamos tener que realizar la documentación posteriormente teniendo que volver sobre el código desarrollado:
• Utilizando PHPDoc reference en caso de código php.
• Utilizando JSDoc block tags en caso de código javascript: http://usejsdoc.org/index.html#block-tags

HTML

• Declarar el DOCTYPE correcto, para HTML5 se utiliza únicamente DOCTYPE.
  
  
• Cerrar las etiquetas abiertas, normalmente todas las etiquetas cuentan con etiqueta abrir y otra para cerrar por lo que es importante cerrar cada etiqueta abierta.
  
  
• Nombrar siempre las etiquetas en minúscula para evitar malas interpretaciones por parte de los navegadores modernos.
  
  
• Utilizar CSS y Javascript SOLO en archivos externos para aumentar la legibilidad del código y facilitar las futuras actualizaciones/mejoras en el código.
  
  
• Enlazar los CSS externos dentro de la etiqueta en el HTML.
  
  
• Enlazar los JavaScript externos al final del documento antes de cerrar la etiqueta esto ayudará a que las páginas carguen mucho más rápido ya que cuando un navegador está cargando los scripts detiene la carga del resto del archivo hasta que este termine por lo que cuando los scripts son muy grandes o existe una gran cantidad no ponerlos al final aumenta los tiempos de carga de la página.
  
  
• Usar el atributo “alt” en todas las imágenes rellenándolo con una palabra descriptiva de la imagen. Esto es útil porque si un usuario entra con un navegador que no puede visualizar las imágenes aparecerá la palabra descriptiva de la misma.
  
  
• Especificar la codificación de caracteres correcto añadiendo en el head la siguiente línea: <meta charset="UTF-8"/> 
  
  
• Para la implementación de buenas prácticas en HTML5 podría instalarse el HTMLHint que cuenta con plugins para los diferentes editores:
• Visual estudio: https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint
• Atom: https://atom.io/packages/linter-htmlhint

JavaScript

La herramienta ESLint sirve para identificar e informar sobre los patrones encontrados en el código ECMAScript/JavaScrip.

Instalacion: https://eslint.org/docs/user-guide/getting-started

En ESLint las reglas se agrupan por categorías y no hay reglas habilitadas por defecto por lo que se deben configurar en su archivo de configuración, las reglas de dicho lint pueden ser consultadas en el siguiente enlace: https://eslint.org/docs/rules/

PHP (Según PSR-0, PSR-1 y PSR-2)

• Solo se deben utilizar las etiquetas <?php y <?=. -
  
  
• Separar acciones de efectos secundarios (generar output, acceder a una base de datos, modificación de configuraciones iniciales, uso explícito de require o include, enviar errores o excepciones, modificar variables globales o estáticas, leer o escribir un archivo, etc) de las declaraciones estructurales (clases, funciones, constantes, etc).
  
  
• Solo se debe usar UTF8 sin BOM para código PHP.
  
  
• Un espacio de nombre y una clase deben tener la siguiente estructura: \\(\)*
  
  
• Cada espacio de nombre debe tener un espacio de nombre de nivel superior.
  
  
• Los vendor names, namespaces y class names deben ser combinaciones entre letras mayúsculas y minúsculas.
  
  
• Las contantes de la clase deben declararse en mayúsculas con guiones bajos como separadores: CONSTANTE_DE_CLASE.
  
  
• Los nombres de los métodos deben declararse en notación camelCase.
  
  
• El código debe utilizar 4 espacios como indentación y no tabulaciones.
  
  
• La longitud máxima de las líneas es de 10 caracteres.
  
  
• Debe haber una línea en blanco tras la declaración del namespace y otra después de las declaraciones use.
  
  
• La apertura de llaves en clases y métodos debe ir en la siguiente línea y el cierre debe ir en la línea siguiente después del body. La apertura de llaves en estructuras de control debe ir en la misma línea y el cierre en la siguiente línea después del body.
  
  
• La visibilidad se debe declarar en todas las propiedades y métodos. abstract y final deben declararse antes que la visibilidad. Static debe declararse después de la visibilidad.
  
  
• Las palabras de estructuras de control deben tener un espacio después, las llamadas a métodos y funciones no deben.
  
  
• La apertura de paréntesis para estructuras de control no debe tener un espacio después, y el cierre de paréntesis para estructuras de control no deben tener un espacio antes.

Si seguimos estas recomendaciones para programar, nuestro trabajo final será de una mayor calidad.

¿Necesitas ayuda para programar tu página web? ¡Estamos encantados de echarte una mano! 

Te recomendamos leer