1.
Crear ramas
1. Ve al siguiente link(Mucho cuidado porque si recargar se borra todo el grafico)
[Link]
2. Vamos a crear nuestras ramas de acuerdo a las siguientes tareas asignadas:
Página E-Commerce
Número Tarea Persona Página
1 Base de la página (header, Pedro Home
body y footer)
2 Creará el menú Karla Home
3 Creará el banner Jose Home
4 Creará la lista de productos Karla Productos
5 Ubicación de la empresa con Pedro Contacto
google maps
6 Redes sociales de la empresa Jose Contacto
7 Formulario de contacto Karla Contacto
4. Crea una rama Home
5. Crea una rama Productos
6. Crea una rama Contacto
7. Realiza las tareas 1,2 y 3
8. Integra las tareas de Home a master.
9. Karla se atrasó en la tarea 4 por lo que tendrá que integrar los cambios de la rama Home.
10. Karla termina la tarea y la integra a Master
11. La rama Contacto tiene que integrar todo lo de las ramas Home y Productos para
trabajar.
12. Se realizan las tareas 5,6, y 7
13. Se integran las tareas a master.
2. Ejercicio ramas
1. Ve al siguiente link(Mucho cuidado porque si recargar se borra todo el grafico)
[Link]
2. Vamos a crear nuestras ramas de acuerdo a las siguientes tareas asignadas:
Página agencia de viajes
Número Tarea Persona Página
1 Base de la página (header, Pedro home
body y footer)
2 Buscador de viajes Laura home
3 Paquetes del mes Karla home
4 Reseñas de clientes Jose home
5 Equipo de la empresa Laura nosotros
6 Misión Jose nosotros
7 Visión Pedro nosotros
8 Tabla para cotizar viajes Pedro cotizar
9 Redes sociales de la empresa Jose contacto
10 Formulario de contacto Karla contacto
4. Crea una rama home
5. Crea una rama nosotros
6. Crea una rama cotizar
7. Realiza las tareas 5,6 y 7
8. Integra las tareas de nosotros a master.
9. El feature de home se atrasó por lo que necesitan integrar todo lo que se encuentra en la
la rama nosotros.
10. Realiza las tareas 1,2,3 y 4
11. Integramos home a master.
12. Crea la rama contacto desde master
13. Realiza la tarea 9 y 10
14. Integramos contacto a master
15. El feature cotizar se atraso integra todos los cambios que hay en master a cotizar
16. Realiza la tarea 8
17. Integra cotizar a master.
Suban su captura aquí:
[Link]
2. Trabajar ramas en código
1. Creamos un repositorio tienda en github
2. Creamos una carpeta tienda en nuestro escritorio y la llamamos en VSC
3. Creamos un archivo [Link]
4. Agregamos el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
E-Commer
</title>
</head>
<body>
</body>
</html>
5. Iniciamos git y movemos los cambios al area de preparacion
6. Realizamos la confirmación.
7. Conectamos nuestro repositorio local con el remoto usando origin
8. Realizamos push para subir los cambios.
9. Ver los cambios en [Link]
10. Checamos las ramas que tenemos
11. Creamos la rama Home.
12. Checamos las nuevas ramas.
13. En home creamos nuestro menú con el siguiente código:
<script src="[Link]
<script src="[Link]
<link href="[Link]
rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Home</a>
<a class="navbar-brand nv1" href="#">Productos</a>
<a class="navbar-brand nv1" href="#">Contacto</a>
</div>
</div>
</nav>
14. Movemos el cambio al área de preparación y luego al repositorio local.
15. Integramos los cambios a main
16. Creamos la rama productos desde master
17. Checamos las ramas.
18. En productos creamos un archivo llamado [Link] y agregamos la tabla de
productos con el siguiente código.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>
¡Hola, Marines!
</title>
</head>
<body>
<h1>Productos</h1>
<table>
<tr>
<th>
<img src="[Link] width="300"
height="150" /><br>
<font size="5">Nike Revolution </font><br>
<font size="3">$1,660</font>
</th>
<th>
<img src="[Link] width="300"
height="150" /><br>
<font size="5">Adidas Herren VL Court</font><br>
<font size="3">$2,660</font>
</th>
</tr>
</table>
</body>
</html>
19. En el archivo [Link] modificamos el menú agregando el link de productos
20. Movemos el cambio al área de preparación y luego al repositorio local.
21. Integramos los cambios a main
3. Ejercicio ramas usando GitHub Flow
1. Elimine las ramas del proyecto.
2. Crea una rama develop
3. Crea una rama feature/footer y accede a la rama
4. Crea una carpeta llamada css y dentro un archivo [Link]
5. Agrega el siguiente código en [Link]:
#page-container {
position: relative;
min-height: 100vh;
}
#content-wrap {
padding-bottom: 2.5rem; /* altura de pie de página */
}
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 2.5rem; /* altura de pie de página */
}
6. Agrega dentro de la etiqueta <head> el siguiente código:
<link rel="stylesheet" type="text/css" href="css/[Link]" />
7. Agrega en body el footer:
<h1>Testear footer</h1>
<div id="page-container">
<div id="content-wrap">
Copyright © 2023 Football History Archives. All Rights Reserved.
</div>
<footer id="footer"></footer>
</div>
8. Sube los cambios al repositorio remoto.
9. Ve a develop y saca otra rama llamada feature/boton
10. Coloca el siguiente código:
<input type="button" value="Click me" />
11. Nos vamos a develop e integramos feature/boton y feature/footer
12. Subimos los cambios al repositorio remoto
13. Vamos a crear nuestra rama release desde develop y verificaremos que todo esté bien
en nuestra página.
14. Finalmente integramos release a main.
15. Tuvimos un error!!! se nos fue un mensaje de testeo, hay que eliminarlo esta linea
rapidamente:
<h1>Testear footer</h1>
16. Crea una rama hotfix para corregir el error y subir el cambio directamente a main.