Pablo Durán

Proyecto Web - CSS

1. Antes de empezar

1.1. Propósito del proyecto

En este proyecto voy a mostraros algunas caracteristicas CSS de la web que estais viendo, ya que es lo único que he adaptado a mi página de momento. Más adelante mostraré tambien las caracteristicas de javaScript que tiene la web. Os comparto el código css y javaSricpt que uso en mi web mediante mi github, lo actualizo con cada cambio que hago así que aunque no comente ciertas caracteristicas estará todo subido.

1.2. ¿Que necesitamos?
  • Conocimientos de HTML5, CSS3 y Bootstrap
  • tener un compilador sass
  • Un procesador de texto, en mi caso VSCode

2. Explicación

2.1. Base del proyecto

Para aligerar tiempo decidí empezar con una base bastante sólida. Buscaba un tema que cumpliese con las siguientes caracteristicas:

  • Compatible con Bootstrap
  • Diseño minimalista
  • Código fuente en sass/scss
  • Gratuito

El tema DevBlog de la empresa 3rdwavemedia y diseñado por Xiaoying Riley se ajustaba a los que buscaba así que me lo descargué y empecé a estudiar su código.

2.2. Estudiar el código

Lo primero que hice fue revisar la versión de Bootstrap ya que es el núcleo del diseño. Me encontré con una versión bastante actualizada, la 4.3, pero como ya había saldo la siguiente versión decidí ponerle la 4.4 con todos los ficheros fuente por si a alguien le interesaba toquetear tambien la base de bootstrap, aunque no veo recomendable retocar directamente el código de Bootstrap. Tambien actualicé la versión de jquery y por el momento nada más hasta que lo necesite.

Lo siguiente a mirar era el scss escrito por la diseñadora el cual me gustó bastante ya que es un trabajo impecable todo separado en sus respectivos archivos. Al sér un tema bastante básico con solo tres páginas fue bastante sencillo entender todo. Ahora tocaba el paso de crear nuestro estilo propio.

2.3. Modificaciones

Decidí empezar por lo más sencillo, cambiar el color de web. El tema principa venia con 8 colores diferentes pero como quería dejar uno universal borré todos y modifiqué el primero. Cambié el colo por el #54B689, que es el color que vemos en todas partes y añadí la variable $theme-bg-light: #EDFFF6; que es el verde claro que vemos en el fondo de partes de la página. Decidí añadirlo porque solo tenía un fondo gris que no me llegaba a ustar del todo y me parece que de esta forma conjuta muy bien sin llegar a saturar.

Lo siguiente fue crear el archivo _item.scss para crear una cuadricula específica para mostrar los lenguajes que uso en mis proyectos. A parte de modificar tamaños y márgenes tambien añadí los colores de cada icono y lo hice dentro de item, para que no modifique el colo que tienen en otras partes de la web, y un :hover para que cuando pases por encima cambiase el color de esa celda de blanco a verde suave.

Tambien he creado el archivo _card.scss la cual tiene bastantes funciones como son tamaños de imagenes, margenes dementiendo de lo que quieras mostrar, bordes redondeados, sombras y tamaños de textos e iconos. Entrando un poco en detalle en algunas de las etiquetas podemos ver .svg-card la cual tiene todos los marámetos básicos para añadir imagenes vectoriales a las tarjetas, .card-features que añade un diseño básico a la tarjeta, color de fondo y sombreado y los últimos importantes por mostrar son .card-graphic y .card-limit que son para mostrar gráficos y datos de otros proyectos.

El resto de modificaciones generales tán el la clase _base.scss la cual tiene las modoficaciones principales de la página. Aquí tambien bastantes modificaciones pero sólo comentaré las 3 que más me gustan. La que más me gusta es .section-title la cual añade una elegante barra del color principal del tema a la izquierda del título y un degrado por abajo hasta blanco. Tambien cree un estilo para las lineas de código que muestro en los párrafos de texto, se llama .code-line y como acabamos de ver resalta el código con el color de la web y por último comentaré sobre .floating-box el cual redondea esquinas, añade una pequeña sombra y crea un margen derecho para que la sombra no se corte, lo uso principalmente para los bloques de código que de la sensación de que están flotando por encima de la página.

					           
/*ejemplo de floating-box*/
.floating-box {
    -webkit-box-shadow: 7px 7px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 7px 7px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 7px 7px 10px 0px rgba(0,0,0,0.5);
    border-radius: 5px;
    margin-right: 15px;
}
					           
				            

Para que una página se vea bien en todos los formatos de pantalla tenemos que hacerla responsive y por eso en el archivo _responsive.scss que creó la diseñadora del tema base que hemos escogido están añadidas los estilos que han tenido que ser modificados para adaptarse a otros formatos de pantalla que lo sea el estandar 1920x1080. Hay que decir que este documento ha sido creado bajo la directriz que nos indica bootstrap para no crear error gráficos en la página web.

3. Conclusión

Estoy muy contento con el resultado del diseño de la web para ser una primera versión. Aun me queda mucho trabajo por delante pero lo iré ampliando poco a poco.

Mejoras a tener en cuenta para futuras revisiones:

  • Crear animaciones con javaScript.
  • apadir un modo oscuro.
  • Mejorar la página de experiencia.
  • Añadir una galeria.