Scribd
Cargar
119 vistas14 páginas

Lab02 Bootstrap

Este documento presenta un laboratorio sobre la creación de un portafolio usando Bootstrap. Explica cómo instalar Sublime Text y los plugins Emmet y Emmet CSS Snippets. También describe cómo crear la estructura del proyecto, descargar Bootstrap y crear el archivo index.html. El objetivo es que los estudiantes aprendan a utilizar Bootstrap para diseñar un portafolio web.

Cargado por

Antonio Arroyo Paz
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 DOCX, PDF, TXT o lee en línea desde Scribd
119 vistas14 páginas

Lab02 Bootstrap

Este documento presenta un laboratorio sobre la creación de un portafolio usando Bootstrap. Explica cómo instalar Sublime Text y los plugins Emmet y Emmet CSS Snippets. También describe cómo crear la estructura del proyecto, descargar Bootstrap y crear el archivo index.html. El objetivo es que los estudiantes aprendan a utilizar Bootstrap para diseñar un portafolio web.

Cargado por

Antonio Arroyo Paz
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 DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 14

Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

Laboratorio 2: Práctica Portafolio en


Bootstrap

Objetivos
Luego de completar este laboratorio usted será capaz de:

 Instalar Sublime Text


 Instalar los plug-in en el sublime-text
 Crear del árbol del proyecto
 Descargar del Bootstrap
 Crear el archivo index.html

Ejercicio1: Instalación de Sublime Text


Sublime Text es un editor de texto y editor de código fuente está escrito en C++ y Python para los
plugins. Desarrollado originalmente como una extensión de Vim.
Se puede descargar y evaluar de forma gratuita. Sin embargo, no es software libre o de código abierto
y se debe obtener una licencia para su uso continuado, aunque la versión de evaluación es
plenamente funcional y no tiene fecha de caducidad. Actualmente se encuentra en la versión número
3.

1. Ingresar al siguiente link. https://www.sublimetext.com/

2. Click en Download

3. Click en Windows64bit

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 1


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

4. Generalmente el archivo se encuentra en la carpeta Descargas

5. Proceder a Instalar

Lab-2 – Pág. 2 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas
Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 3


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

Lab-2 – Pág. 4 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas
Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

6. Ejecutar Sublime Text

Ejercicio2: Configuración de Sublime Text

Se instalará el plug-in emmet que tiene como ventaja el manejo de instrucciones html a través de
palabras cortas y haciendo uso del teclado

1. En el menú Preferences, ir a la opción Package Control

2. Escribimos install, seleccionamos la opción Install Package

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 5


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

3. A continuación, escribimos emmet se nos muestra una lista de opciones, click en Emmet

debemos de instalar:
- Emmet
- Emmet Css Snippets

4. Se nos presenta la siguiente pantalla

Lab-2 – Pág. 6 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas
Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

5. Continuamos con la instalación, menú Preferences, ir a la opción Package Control

6. Escribimos install, seleccionamos la opción Install Package

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 7


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

7. Escribimos emmet y Click en Emmet Css Snippets

8. Reiniciar el sublime text

Ejercicio3: Creación del árbol del proyecto

Lab-2 – Pág. 8 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas
Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

Portafolio

css
img
js
Ejercicio 4: Descarga de Bootstrap

1. Ingresar a la página https://getbootstrap.com/ elegir la opción de Download.

2. En la pantalla de download hace click Download.

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 9


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

3. En la carpeta de Descargas se encontrara el archivo:

4. Descomprimir el archivo

Lab-2 – Pág. 10 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas
Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

5. Renombrar la carpeta bootstrap-4.3.1-dist por portafolio

Ejercicio 5: Creación del index.html


Crear el archivo index.html dentro de la carpeta portafolio

1. Dentro de Sublime Text ir File/new file, Ubicar carpeta portafolio y escribir index.html

2. Dentro de Sublime Text Digitar ! (símbolo de admiración) y luego presionar la tecla Tab

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 11


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

3. Al terminar de presionar la tecla Tab, se muestra el esqueleto de una página web html

4. Luego cambiar el contenido <title>


Ejercicio1-BootStrap-FIS-UANCV

como se muestra en la figura

Lab-2 – Pág. 12 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas
Frontend Bootstrap Laboratorio 2: Práctica Portafolio en Bootstrap

5. Debajo de <meta charset="UTF-8"> insertar una línea


Escribir: meta:vp y luego la tecla TAB

Meta viewport  hace posible que el contenido pueda verse en un dispositivos móviles

6. Después de la etiqueta <body>

Agregar:
<header></header>
<main></main>
<footer></footer>

Mg. Ing. Antonio Arroyo Paz Lab-2 – Pág. 13


Carrera de Ingeniería de Sistemas
Laboratorio 2: Práctica Portafolio en Bootstrap Frontend Bootstrap

7. Despues de la etiqueta </title> insertar una linea y escribir

<link rel="stylesheet" href="css/bootstrap.min.css">

8. Por último el código quedaria asi

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-
scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Ejercicio1-BootStrap-FIS-UANCV</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>

Bibliografía

Documentación Emmet
Instalación
https://www.youtube.com/watch?v=nD3Hr-Y7UBE

https://docs.emmet.io/cheat-sheet/

Para mayor información sobre atajos para Sublime Text


http://jotajotavm.com/Atajos-Sublime-Text-01-html-5.html

El profesor:

Mg. Antonio Arroyo Paz

[email protected]

Lab-2 – Pág. 14 Mg. Ing. Antonio Arroyo Paz


Carrera de Ingeniería de Sistemas

También podría gustarte