Scribd
Cargar
22 vistas13 páginas

Webdev-Labs - Práctica de HTML y CSS - conZIP

Cargado por

j8043031
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
22 vistas13 páginas

Webdev-Labs - Práctica de HTML y CSS - conZIP

Cargado por

j8043031
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

https://cs396-web-dev.github.

io/spring2022/assignments/lab01
CS396: Primavera de 2022
Introducción al Desarrollo Web
Temario Horario Asignaciones Lecturas y Calendario Campuswire (en
Referencias inglés)

Asignaciones > Laboratorio 1. Práctica de HTML


y CSS
Fecha de vencimiento el viernes, 04/01 @ 11:59 PM. 5 puntos.

Lecturas
Si eres relativamente nuevo en Git y GitHub, completa el tutorial de GitHub antes de
venir al laboratorio esta semana:

• Tutorial de GitHub y hoja de trucos de Git

Introducción
El objetivo del laboratorio de hoy es ayudarte a empezar a usar GitHub (si eres nuevo en su
uso). En concreto, podrá:

1. Instalación de VS Code
2. Configurar un nuevo repositorio (en GitHub.com)
3. Configurar git localmente (en tu portátil)
4. Revise algunos conceptos básicos de Git (agregar, confirmar, insertar y ramificar)
5. Practica la ramificación
6. Opcional: Práctica de HTML

Sus tareas
1. Instalar Visual Studio Code
Se recomienda usar Visual Studio Code como editor de código:
1. Descargar e instalar Visual Studio Code: https://code.visualstudio.com/

2. Instale también la extensión "Live Server" (haga clic en el botón verde "Instalar").

2. Configura tu repositorio de GitHub


1. Si aún no lo has hecho, regístrate en GitHub: https://github.com/join.

2. Luego, cree un nuevo repositorio público llamado (consulte el tutorial anterior si no


sabe cómo). Por favor, asegúrate de marcar tu repositorio como "público". webdev-
labs
• Deje las siguientes opciones SIN MARCAR:
• Agregar un archivo README
• Agregar .gitignore
• Elija una licencia

3. Por último, cree un token de acceso personal de la siguiente manera:


• Vaya a "Configuración" en el menú superior derecho
• En el panel de navegación de la izquierda, desplácese hacia abajo hasta que
vea el enlace "Configuración del desarrollador". Haz clic en él.
• A continuación, haga clic en el enlace "Tokens de acceso personal" en el panel
de navegación de la izquierda.
• Generar un nuevo token:
• Asigne un nombre al token webdev
• Hazlo de manera que "nunca caduque"
• Marque la casilla de verificación "repositorio" (que también debería
marcar todas las configuraciones secundarias).
• Guarde el token en un lugar seguro (lo necesitará más adelante y no podrá
volver a verlo después de crearlo por primera vez).

3. Configura git en tu computadora


1. Instala git en tu ordenador: https://git-scm.com/book/en/v2/Getting-Started-
Installing-Git

2. En su computadora, cree una carpeta llamada (créela en algún lugar donde pueda
encontrarla más tarde). A continuación, descárgalo (a continuación), descomprímelo
y mueve tu carpeta dentro de tu carpeta. webdev-labs lab01.zip lab01 webdev-
labs
LAB01.ZIP 

La estructura de su directorio debería verse así:

webdev-labs
└──lab01
├── exercise01
└── exercise02

A continuación, navegue a su directorio desde la línea de comandos y emita los siguientes


comandos (uno a la vez, en el orden que se muestra): webdev-labs

git init
git add .
git commit -m "first commit"
git branch -M main

# IMPORTANT: Replace <USERNAME> and <REPOSITORY> with YOUR github username and
# YOUR repository (webdev-labs). For example, Sarah's remote address would be:
# https://github.com/vanwars/webdev-labs.git
git remote add origin https://github.com/<USERNAME>/<REPOSITORY>.git
git push -u origin main

Cuando hayas terminado, vuelve al repositorio de GitHub que acabas de crear y comprueba
que los archivos se han subido.

4. Conceptos básicos de Git


¿Qué acabo de hacer? Bueno, lea el resumen de la hoja de trucos a continuación para ver
una explicación anotada de cada comando utilizado. Es tentador no leer y saltarse esta
sección, pero por favor hazlo (y hazle algunas preguntas a tu mentor si las tienes).

Mandar ¿Qué hace? Cuándo usarlo

1. git init Crea un nuevo repositorio de Solo una vez


Git en el equipo local. Si miras (cuando se
en tu administrador de configura el
archivos, verás una nueva repositorio por
carpeta que se ha creado en la primera vez)
raíz de tu
directorio. .git webdev-labs

2. git add . El comando git prepara los Frecuentemente:


cambios en el directorio de Cada vez que crea
Mandar ¿Qué hace? Cuándo usarlo

trabajo en el área de un nuevo archivo


preparación. Le dice a Git que y desea
desea incluir actualizaciones asegurarse de
de uno o más archivos en la que el archivo
próxima confirmación. El punto esté bajo control
(.) indica que desea agregar de versiones.
"todos" sus archivos. add

3. git status Muestra todos los archivos que Frecuentemente:


han cambiado desde la última En cualquier
confirmación. También le momento que
indica qué archivos se rastrean desee verificar el
y cuáles no. estado de sus
archivos.

4. git commit -m 'My first Confirmar es como "guardar" Frecuentemente:


commit' una versión de todos los En cualquier
cambios preparados. Esto es momento que
útil si alguna vez necesitó desee guardar
volver a una versión anterior de una versión de su
su código. trabajo.

5. git branch -M main" Crea una nueva rama llamada y Ocasionalmente:


cambia a ella. Una rama se En cualquier
denomina versión del código. momento que
Técnicamente, en realidad son desee crear una
punteros a una instantánea de nueva rama con
los cambios en el código. main nombre de su
trabajo.

6. git remote add origin Conecta el repositorio local Solo una vez
<your_repo_address> que acabas de crear (en tu (cuando se
equipo) a tu repositorio de configura el
GitHub (en la nube). repositorio por
Reemplácelo por la dirección primera vez)
del repositorio de GitHub que
acaba de crear, mediante el
protocolo
HTTPS <your_repo_address>
Mandar ¿Qué hace? Cuándo usarlo

7. git push -u origin main "Pushing" copia todos los Frecuentemente:


archivos confirmados en el ¡En cualquier
repositorio de GitHub (en la momento que
nube). se refiere a su rama desee guardar
actual y se refiere a su rama una versión de
remota. Si la rama remota no sus archivos en la
existe, se creará cuando nube (o enviar su
empuje por primera tarea)!
vez. origin main

Para seguir guardando y realizando un seguimiento de los cambios mediante git o GitHub,
repita los pasos 2, 3, 4 y 7 según sea necesario.

5. Practica la ramificación
Ahora que ha configurado git / GitHub, intentemos comprender cómo funciona la
"ramificación".

Crear una nueva rama "lab01"


Cree una nueva rama llamada "lab01" desde su línea de comandos de la siguiente manera:

git checkout -b lab01 # creates the branch


git branch # lists all of your branches

Después de emitir estos comandos, debería ver algo como esto...

* lab01
main

… donde hay un asterik antes de lab01 (que también puede ser verde). El asterik indica que
ahora es tu "rama de trabajo". lab01

Edita tu código
Ahora, vamos a hacer algunos cambios en algunos de los archivos de la carpeta (en tu
rama): lab01 lab01

1. Abra la carpeta en el código de Visual Studio. lab01/exercise01


2. Abra y descomente el enlace de la hoja de estilos. index.html
• Tenga en cuenta que para que una hoja de estilo se aplique a un archivo HTML,
debe vincularla explícitamente en la sección. <head></head>

3. Cambia la foto por otra que encuentres en Internet.


• Sugerencia: referencia de imagen

4. Haga que su tarjeta se vea como la que se muestra a continuación usando varios
selectores:
• Sugerencia: referencia del modelo de caja
Confirme y envíe su rama "lab01"
Confirme y envíe los cambios de la siguiente manera:

git add .
git commit -m 'Lab01 updates' # use any message you like
git push -u origin lab01

Ve a GitHub y verifica que tienes dos ramas: y main lab01

Vuelve a tu rama "principal"


Vuelva a su rama de la siguiente manera: main

git checkout main

Tenga en cuenta que el código se revirtió a la versión de los archivos que descargó
originalmente. Ahora vuelva a : lab01

git checkout lab01

¡Ten en cuenta que los cambios han vuelto! ¡Asombroso! Finalmente, si desea "fusionar los
cambios de la rama en su rama, haga lo siguiente: lab01 main

git checkout main


git merge lab01
git push origin main

Ahora, ambas ramas serán idénticas. Por lo general, las ramas se usan para código
experimental / nuevas características y, luego, una vez que esas características se han
finalizado, se incorporan (o "fusionan") en la rama (que representa la base de código
principal). main

Práctica Extra (Opcional)


No es obligatorio, solo para que pienses en los diseños en preparación para la tarea de la
próxima semana.

Usando cualquier enfoque que desee, cree las siguientes pantallas para computadoras de
escritorio, tabletas y dispositivos móviles (en la imagen a continuación). Para ello:
1. Abra la carpeta. lab01/exercise02

2. Deberá utilizar consultas de medios, que se han configurado para usted en el archivo.
exercise02/style.css
• Sugerencia: referencia de consultas de medios

3. También tendrás que descomentar la metaetiqueta de la ventana gráfica en la


sección de tu archivo HTML. <head></head>
• Obtén más información sobre la metaetiqueta viewport en MDN. En el contexto
del diseño web móvil, esta etiqueta le dice al navegador que respete las
dimensiones del dispositivo (en lugar de asumir que el sitio web fue diseñado
para una pantalla de escritorio).

Escritorio

Tableta
Móvil
Dale vida
Si tiene tiempo, experimente con una o más de las siguientes mejoras:

1. Intente cambiar la fuente del encabezado de la tarjeta (etiqueta H2) para usar una
fuente de Google.
• Consejo: Dale una oportunidad a este tutorial (o encuentra uno que te guste
más)

2. Cambia una de las imágenes por un video incrustado (de YouTube o Vimeo).
• Sugerencia: Incrustación de medios

3. Intenta modificar tus archivos HTML y CSS como quieras.

¿Qué entregar?
1. Pega un enlace a tu repositorio en Canvas
Pega un enlace a tu repositorio de GitHub en el cuadro de texto de Canvas para Lab
1. webdev-labs

2. Responda las siguientes preguntas:


1. ¿Qué es una sucursal?

2. ¿Cuál es la diferencia entre el comando "commit" y el comando "push"?

También podría gustarte