Cómo montar una web desde 0 sin WordPress

Voy a ir actualizando este post con los avances, luego ya me currare el contenido.

Por si no lo sabais odio WordPress aunque lo utilice mucho, soy fan de hacerme las cosas yo mismo, pero en esta ocasión lo unico que no voy a hacer yo mismo es el diseño del proyecto.

El diseño de la web

Estoy enamorado de Dribbble lo descubrí hace un montón de años y la calidad de los diseños es brutal, en este caso nos vamos a basar en este diseño de UXNinja, lo vamos a maquetar y después continuaremos con el desarrollo.

Entorno de desarrollo

Si no tienes instalado Apache, ni PHP en tu PC sera tedioso montar tu entorno, para solucionar esto de manera muy sencilla y basandonos que en este post haremos las cosas rapido y simples usaremos WAMP (Windows), MAMP (iOS).

Generalmente este tipo de gestores locales nos instalara Apache + Mysql + PHP y con ello podremos lanzar nuestro entorno de desarrollo (localhost).

[VIDEO cómo-instalar-wamp]

Quiero recalcar que normalmente y para casos mas avanzados no se suelen usar ni WAMPS, ni MAMPS, ni ostias en vinagre, pero eso lo dejaremos para un vídeo mas avanzado.

Maquetación

Suelo maquetar con preprocesadores de css como Sass pero en este caso y para que se entiendan las cosas, lo desarrollare a medida con HTML, CSS y JS.

Para más info lee sobre las ventajas de usar preprocesadores de CSS

Yo generalmente cuando quiero pasar de imagen a maquetación, suelo ajustar la imagen al tamaño de mi resolución ( si la imagen es de un tamaño distinto ej: 1240×720 la adapto a mi resolución 1920 x 1080 con Photoshop )

[GIF del ajuste]

Una vez tenemos la imagen, la suelo guardar en la carpeta /images de nuestro proyecto con bajo el nombre “dlt-1.jpg”, la extensión dlt la suelo usar para identificar archivos que se deben eliminar antes de enviar a producción.

Ahora empieza lo tedioso para muchos y es maquetarlo todo, en mi caso, me mola mucho más maquetar que diseñar, así que me lo paso teta.

Los objetivos de una buena maquetación

En mi opinión personal creo que lo más importante que se le debe dar al user lo que busca de una manera directa y no meter nada de paja, esto se traduce en:

PROHORIZA LA EXPERIENCIA DE USUARIO (UX) A TRAVES DE UNA BUENA INTERFAZ DEDICADA AL USUARIO (UI).

Esto creo que es algo que sabemos todos, no tenemos que hacer webs para google, tenemos que hacer webs para usuarios que buscan en Google, que es algo muy distinto.

Entonces me enfocare 100% en mejorar el diseño en puntos que encuentre necesarios y preferiré separar contenidos en distintas Urls a meter todo en una.

Otra cosa indispensable a la hora de maquetar es pensar siempre de manera modular, ya no sirve desarrollar de manera hereditaria (salvo en algunas excepciones), lo que se lleva ahora es maquetar de manera modular los componentes que darán forma a nuestra web.

Para mas info: Scalable and modular architecture for CSS

Y generalmente así suele ser mi estructura para definir los modulos:

 

  • Creo una clase padre, en este caso header.
  • aplico un container generico, como uso flexbox, me he definido un container llamado flex-content.
  • defino el identificador de los hijos con un “-“
  • Y las caracteristicas e hijos de estos hijos los defino con un “_”

Esto me ofrece la posibilidad de aplicar este elemento en cualquier vista de mi web sin tener conflictos con otros elementos.

Ahora mismo estoy maquetando, hare update cuando vaya teniendo avances.

Comparte este articulo si te apetece y si no, no

Leave a Reply

Your email address will not be published. Required fields are marked *