Cómo estructurar una página web

Si te has decidido por realizar una página web artesanal, o sin utilizar plantillas HTML5 o un CMS como Wordpress, quiero felicitarte. Acabas de iniciar un camino donde vas a aprender, vas a conocer en profundidad su propio sitio, y conseguirás una web optimización difícil de superar. Pero lo primero es lo primero, hay que ordenar la forma de trabajar.

Archivos y carpetas

Para el desarrollo necesitaremos una estructura lógica de carpetas. En negrita he puesto las carpetas y en cursiva los ficheros.

Voy a explicar detalladamente la razón de cada elemento:

El interior del main.scss sería parecido al siguiente:

@import 'variables';
@import 'fonts';
@import 'animations';
@import 'mixins';
@import 'home';

Como he comentado anteriormente, su objetivo en la vida es llamar a otros CSSs. En el caso que tuviéramos cualquier otro CSS de un plugin o Framework, lo añadiríamos con import.

El index.html es el core de nuestra web. El siguiente ejemplo puede servir de plantilla HTML para cualquier sitio:

<!--Indica que el documento utiliza HTML5-->
<!DOCTYPE html>
<!--Hace saber al navegador que la página esta en castellano-->
<html lang="es">
	<!--Configuraciones-->
	<head>
			<!--Permite carácteres extraños del alfabeto americano: ñ, á, é...-->
			<meta charset="utf-8" />
			<!--Título que aparecerá en la pestaña - La estructura será el nombre de la página actual + Descripción del sitio-->
			<title>Home - Mejor programador web</title>
			<!--Icono que acompañará al title. También será el icono que se guardará a la hora de que hagan un marcador	-->
			<link rel="icon" type="image/png" href="img/favicon.png">
			<!--Bloquea el zoom en smartphones-->
			<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
			<!--Declara quien es el autor del sitio. -->
			<meta name="author" content="Andros Fenollosa">			
			<!--Declara palabras claves para el SEO.-->
			<meta name="keywords" content="html5, calidad, responsive design, android, ios">
			<!--Declara la descripción de la web. En Google será el texto que acompañe en los resultados. -->
			<meta name="description" content="Diseñador y programador web expecializado en la excelencia.">
			<!--Declara imagen que deberá mostrarse en Facebook o alguna otra red social cuando se comparta. -->
			<meta property="og:image" content="img/miniatura.png">
			<!--Enlaca el archivo CSS que genera SASS. Dentro está todo. --
			<link rel="stylesheet" type="text/css" href="css/main.css">
	</head>	
	<body>
		<!--Contenido de la web-->
		Hola Mundo
		<!--Javascripts -->
		<script src="js/home.js"></script>
		<script src="js/main.js"></script>
	</body>	
</html>

Fuentes

Un buen lugar para conseguir fuentes sería Google Fonts. No infringimos ningún certificado comercial y podemos usarlas sin preocuparnos. La descargas, la introduces en la carpeta fonts y lo vinculas en _fonts.scss.

Iconos

Nuestra web va a necesitar iconos. Y cuanto más variedad mejor. Lo más utilizado en la actualidad son Fonts awesome. Todos son realmente sencillos de aplicar y son libres. Cuando te lo descargues tendrás un CSS que habrá que colocar en css/vendor. A continuación solo hay que vincularlo en main.scss. No te olvides de copiar las fuentes en fonts.

Framework

Existen herramientas que nos aligerarán mucho el trabajo. Sobretodo cuando realizamos tareas repetitivas o relacionadas con el responsive design. Si trabajas en HTML, con unas pocas clases podrás realizar componentes muy rápido. Secciones que estas cansado de repetir en otros sitios.

El más conocido es Bootstrap. No solo te ayuda a maquetar, sino que trae elementos en Javascript ya preparados. Muy recomendable si estas empezando. En el caso que lo conozcas y sientas que estas a cierto nivel, no estaría de más irte a Flex. En concreto a Bulma. Un Framework realizado por unos de los mejores diseñadores web del mundo. Sencillo, claro y con mucho gusto. Pero no son los únicos. Hay una infinidad de Frameworks CSS por la red. Encuentra el que más te guste y aprende todos sus recovecos.

Tener un proyecto ordenado no va a notarlo el cliente, pero si que te va a hacer más rápido. Te ayudará a trabajar con otras personas, y será fácil de ampliar. Incluso llegarás a amarlo. Y si no te enamora lo que haces, es mejor que no lo hagas.

Versión escritorio