4

Crea la versión Responsive del Proyecto sin ser un Experto.

Saludos Platzinauta! Que bueno tenerte aqui ahora sé que deseas saber como maquetar y diseñar la versión responsive del proyecto del curso, ¡Comenzemos a trabajar! yo te guiaré con este tutorial y lo haremos paso a paso, sin saltarnos nada.
.
El objetivo de este tutorial es ayudarte a ver el proyecto con ojos de programador, solo con un par de cambios llegaremos a la version responsive del proyecto. Entonces ¡Manos a la obra!

¿Cómo funciona la versión responsive del proyecto del curso?


El proyecto de este curso funciona gracias a la estrategia basada en la maquetacion del Curso de Responsive design: Maquetación Mobile First , el cual nos servirá para no dañar lo que hicimos con anterioridad en el curso.
.
En este tutorial lo explicare para cualquier Sistema Operativo, entonces ¡Date un respiro! ya que será un tutorial muy entretenido.
.
Tambien estaremos usando git así que no caería mal el Curso Profesional de Git y Github
.
Excelente, ya lo tienes ¡Comenzemos!

Instalación del proyecto (opcional)


Muy bien, primero que nada debemos tener el proyecto hasta la última clase en nuestro ordenador, en caso de no contar con uno te dejo este repositorio para que lo clones:

git clone [email protected].com:paolojoaquinp/lego-superheroes.git

Personalmente yo utilizo una clave SSH, si no usas SSH (Deberías usarlo), es una buena práctica y los buenos programadores lo usan. Sustituye el enlace http que solías usar.
.
Genial, ya tienes el proyecto, sin embargo, debemos “retroceder en el tiempo”, ya que aún no esta hasta la última clase, entonces ejecutamos:

cd lego-superheroes
git reset f9edf1d --hard

Basicamente con este último comando (git reset) retrocedimos en el tiempo, pero ¡ten cuidado! porque no se puede volver al futuro, es decir, no podremos volver donde comenzamos.
.
Excelente, ahora que tenemos el proyecto en nuestro ordenador ¡Vamos a ello!

Implementación


Empezamos creando los archivos tablet.css y phone.css en la carpeta ./styles.
.
Perfecto, ahora realizaremos un par de modificaciones en nuestro index.html, esta es la parte más importante, así que presta mucha atención.
.
Para comenzar agregaremos en la etiqueta head nuestros archivos css que creamos con anterioridad:
.

....
<link rel="stylesheet" href="./styles/main.css">
<link rel="stylesheet" href="./styles/tablet.css" media="(max-width: 900px)"/>
<link rel="stylesheet" href="./styles/phone.css" media="(max-width: 580px)"/>
......

Mucho ojo que deben estar en ese orden ya que el index.html se lee en cascada, y se podría causar problemas a futuro.
.
Genial, ahora reemplazaremos el código que esta en la imagen, esto en todo caso es encerrar la etiqueta

cambiar el rojo por el verde

Captura de Pantalla 2021-10-18 a la(s) 21.43.45.png

Además como pueden ver también hay que agregar un hipervinculo debajo de nuestra lista y no olviden agregarle las clases css.

Aplicando Estilos


Muy bien, ahora nos concentraremos en los estilos, para lograr nuestro cometido he dejado un Gist de los estilos main.css, y también para nuestro phone.css, el cual lo encuentras en el siguiente Gist de los estilos phone.css.

¿Por qué copiaremos los estilos?


La respuesta es que este tutorial es plenamente orientado a la maquetacion responsive y los estilos anteriores se concentraban en darle color, tamaño de fuente, margin padding, etc.
.
Genial!, ahora viene la magía. ¡Vamos por ello!

Implementando estilos Responsive


Entonces ahora solo nos queda tablet.css y Copiaremos este Gist especial, el cual es especial porque le falta una clase, puedes adivinar cual es?.
.
Excelente, si dijiste container, la implementaremos en tablet.css, con las siguientes observaciones:

// RESPONSIVE
.container {
    display: grid;
    grid-template-columns: 75%25%;
    grid-template-rows: 15%60%25%;
    grid-template-areas: "nav     nav""aside   footer""section section";
}

En comparación de la otra versión (para ordenadores):

// ORDENADORES.container {
    position: absolute;
    z-index:1;
    width: 100%;
    height:100%;
    display: grid;
    grid-template-columns: 55%45%;
    grid-template-rows: 20%50%30%;
    grid-template-areas: "nav     aside""section aside""footer  aside";
}

Perfecto!, enfasís en grid-template-areas, lo que hicimos fue estirar nuestro nav, estirar nuestro section, y mover nuestro footerjunto al àside`.
.
En conclusión podemos decir que es completamente posible ver con ojos de programador nuestro proyecto. Es muy importante que nosotros como programadores logremos adaptar nuestras páginas y aplicaciones a todos los dispositivos y usuarios.
.
¡Ahora si! puedes publicarlo en tu portafolio.

Fuentes


Escribe tu comentario
+ 2