6 Consejos para trabajar una web ordenada
Blog - 6 Consejos para trabajar una web ordenada

6 Consejos para trabajar una web ordenada

El orden y la organización en cualquier proyecto es de suma importancia, ya que mejora el rendimiento de la misma y nos facilita tener al alcance de la mano los recursos que necesitamos en el instante en el que lo requerimos. ¿Que sucedería por ejemplo si en un taller un artesano tuviera regada sus herramientas por todas partes, o sus materiales, o sus pinturas? perdería tiempo buscándolas y su producción laboral y creativa se vería afectada.

Hacer un proyecto web no se escapa de la mencionada organización y debido a que un trabajo de esta envergadura es un proceso que involucra contar con varias herramientas, recursos, estilos, componentes etc. El no tener un orden en nuestra carpeta se vuelve un caos, lo que trae como resultado un producto web deficiente, lento, poco editable, con errores de maquetación y poco entendible para los navegadores.

Es por ello que en este blog te daré 6 consejos sobre una manera de trabajar ordenada. Espero que te sean útiles.

1.-ENCARPETA TUS ARCHIVOS POR EXTENSIONES

Tal vez esto parezca algo obvio, sin embargo es algo que no solemos hacer por que comúnmente dejamos los plugins que ocupamos en nuestros trabajos tal y como los conseguimos, sin embargo, tomarse un tiempo para acomodar nuestros archivos facilitará su localización y es muy probable que nos lleguemos a encontrar con estilos que se sobre escriben y que nos puedan ocasionar conflictos de diseño y funcionalidad. A continuación te muestro un ejemplo:

Carpeta raíz:

1. index.html
2. documentation
a. css
 - icons 
     - fontawesome
     - icons.css
 - grid.css
 - layout.css
 - library.css
 - navigation.css
 - styles.css
b.fonts (archivos en extensiones .ttf .eot .otf para fuente personalizada)
c. img
 - backgrounds
     - back-01.png
     - back-02.png
 - gallery
     - gall-01.png
     - gall-02.png
 - marks
     - mark-01.png
     - mark -02.png
 - favicon.ico
 - logo.png
d. video
 - js
     - library.js
     - menu.js
     - backtotop.js
     - plugins-varios.js
e. pages
 - nosotros.html
 - servicios.html
 - blog.html
 - contacto.html

2.-EVITA PROBLEMAS, ESCRIBE EN INGLÉS Y EN MINÚSCULAS

Los navegadores y algunos servidores son sensibles a caracteres latinos y a las mayúsculas,  esto significa que aunque en tu sistema tu proyecto se verá bien, en la web algunas rutas o funciones aparecerán con error, así que para evitarnos ese problema te recomiendo nombrar en inglés y en minúsculas  archivos, carpetas, estilos, selectores, scripts, plugins, etc. “Excepto al escribir comentarios, con ellos no hay problema”.

3.-SEGMENTA TUS ESTILOS EN VARIAS HOJAS

Tal y como se puede observar en la lista superior las reglas que le dan estilo a la página pueden dividirse en seis hojas, en lo personal me ha resultado muy útil, ya que no necesito del inspector de código para saber dónde se encuentra un estilo en específico, y no tengo que estar bajando en el scroll cientos de líneas para hallar una propiedad en cuestión. 

icons.css : esta hoja css la descargamos de sitios que nos ofrecen iconos gratuitos como font awesome y contiene una librería de iconos comúnmente usados en diseño web, como se puede observar en la lista superior va encarpetado junto con el resto de archivos que se descargan con ella.

grid.css : en el colocaremos todos las reglas referentes al sistema de columnas, otros estilos que podemos poner son los siguientes (.wrapper, .row, .hoc y .container), “Por lo general a diferencia del resto de las hojas, una vez armado este archivo se mantiene intocable en nuestro proyecto”.

layout.css : en esta hoja capturaremos todo lo referente a la maquetación de nuestro diseño, un ejemplo podría ser el siguiente. 
  • /* Top bar */
  • /* Social icons */
  • /* Header */
  • /* Slide */ 
  • /* Start content area */
  • /* Comments */
  • /* Articles */
  • /* Split box */
  • /* Click to Action */
  • /* End content area */
  • /* Footer */
  • /* Copyright */

library.css : lo que pondremos aquí serán aquellos elementos que complementan la maquetación de nuestro proyecto, ayudándonos a jerarquizar nuestro contenido y presentar de manera más amigable la información al usuario.  

  • /* Buttons */
  • /* Icons */
  • /* Tables */
  • /* Form */
  • /* Gallery */

navigation.css: las reglas que esta hoja llevará serán todas aquellas estructuras que nos ayudan a desplazarnos dentro del sitio, un ejemplo de su ordenación seria la siguiente:

  • /* Main nav */
  • /* Breadcrumb */
  • /* Sidebar navigation */
  • /* Gallery page */
  • /* Back to top */

styles.css: en este documento colocaremos todas las reglas que le dan apariencia e identidad a nuestro sitio, asimismo en ella vincularemos el resto de las hojas, a continuación una propuesta de su armado.

  • /* Imported files and fonts */
  • /* Reset styles */
  • /* Transition properties */
  • /* Fonts */
  • /* Spacing, margin and padding */
  • /* Text styles */
  • /* Image styles */

3.-LAS PROPIEDADES DE COLOR VAN APARTE

En todas la hojas, excepto en el grid.css habrá que ponerle color a los estilos, pues bien, es sumamente practico colocar estos valores aparte, hasta el final de nuestras hojas.css, asi sabremos que todo lo que respecta a colores se encontraran  al final de las mismas. 

4.-COMENTA TUS ARCHIVOS HTML Y CSS

No hay nada que dé más orden a nuestro trabajo que tenerlo documentado con comentarios, indicando donde comienza una sección y donde termina, que función cumple, que parámetros de la misma no deben borrarse o por lo contrario, si son opcionales. Esto nos ayuda a nosotros ahorrándonos la tarea de recordar para que pusimos determinada regla por ejemplo, y les facilita el trabajo de edición de nuestro proyecto a un tercero. 

5.-NOMBRA DE MANERA GENERAL TUS SELECTORES

El nombre de las clases o ids no deben tener nombres específicos que describan las características que tiene, sino en base a la función que realizan ejemplo:
.cuadro-relleno-rojo = .cuadro-alerta


6.-UTILIZA DE MANERA CORRECTA LOS SELECTORES ID Y CLASS

Por último, algo que te ayudara a maquetar tus sitios web de manera ordenada es saber utilizar los selectores de manera correcta, en especial los identificadores (Id) y las clases (class), te sugiero utilizar clases para hacer referencia a estilos, e identificadores únicamente para nombrar acciones que se controlarán con javascripit o bien, para poner anclas a secciones de una landingpage por ejemplo, ¿Y qué ganaremos con ello? bueno, aparte de que los navegadores entenderán mejor la función de cada parte de nuestras páginas, nuestros documentos html y css estarán mas limpios al no tener un juego innecesario de clases con identificadores. 

Espero que estos consejos te ayuden a ordenar de manera correcta tus trabajos, recordándote que la mejor manera de aprender es haciendo, y recalcándote el no tener miedo a mover y reacomodar tus archivos y carpetas, algunos enlaces se perderán, eso es seguro, pero la cosa es escribir de nuevo el vinculo correcto.

¡Nos vemos en el próximo blog!

Luis