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.
- css
- _animations.scss
- _variables.scss
- _fonts.scss
- _mixins.scss
- _home.scss
- main.scss
- vendor
- js
- home.js
- main.js
- vendor
- fonts
- img
- index.html
- robots.txt
Voy a explicar detalladamente la razón de cada elemento:
- css: Cualquier hoja de estilo. Independientemente de si es un CSS, SASS, SCSS o LESS.
- _animations.scss: En un fichero independiente se agrupa todas las animaciones que construyamos.
- _variables.scss: Donde tendremos declarado todas las variables con los colores, tamaños, etc…
- _fonts.scss: Aquí irá alojado las importaciones de todas las fuentes que tengamos.
- _mixins.scss: Cualquier mixin que realicemos. Muy útil para tareas repetitivas.
- _home.scss: CSS de la primera página. Al ser un ejemplo, la he llamado Home.
- main.scss: Se encargará únicamente de importar todos nuestros archivos: animations, variables, fonts, mixins, propios…
- vendor: Será el lugar donde guardaremos cualquier CSS externo a nosotros. Como los de un plugin o Framework.
- js: Lugar donde agruparemos nuestros Javascripts. Propios como externos.
- home.js: Javascript exclusivo de la página Home.
- main.js: Aquí irá nuestro Javascript que sea necesario para todas las páginas de nuestro sitio. Como la activación de ciertos plugins generales, o dependientes a nuestro header o footer.
- vendor: Almacenaremos todos los plugins. Un lugar para tenerlos todos sin que nos rompa nuestro orden interno.
- fonts: Todas las fuentes irán aquí.
- img: Cualquier imagen. Dentro ya podrás realizar una estructura por páginas o secciones. Ya depende de ti.
- index.html: Nuestro HTML principal. El nombre no es casual, si quieres que se abra de forma automática cuando entras en tu dominio es obligatorio. El resto de tus páginas pueden tener otros nombres. Irá, posiblemente, la Home.
- robots.txt: Indicaciones para los robots de búsquedas. Indica cuales de tus URLs son permitidas para el posicionamiento.
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.
{{ comments.length }} comentarios