Tìm hiểu và tạo 1 trangchủ website bằng phần mềm figma

Trang 1 TRƯỜNG CAO ĐẲNG HÒA BÌNH XUÂN LỘCKHOA CÔNG NGHỆ THÔNG TINBÁO CÁO THỰC TẬPNGHỀ: TIN HỌC VĂN PHÒNG Trang 2 LỜI CẢM ƠNEm xin chân thành cảm ơn ban giám hiệu, cùng tất cả các cán bộ

TRƯỜNG CAO ĐẲNG HÒA BÌNH XUÂN LỘC

KHOA CÔNG NGHỆ THÔNG TIN

BÁO CÁO THỰC TẬP NGHỀ: TIN HỌC VĂN PHÒNG

TRƯỜNG CAO ĐẲNG HÒA BÌNH XUÂN LỘC TÊN BÁO CÁO: TÌM HIỂU VÀ TẠO 1 TRANG CHỦ WEBSITE BẰNG PHẦN MỀM FIGMA

HSTH: NGUYỄN LÂM THÙY TRÂM MSHS: T10TH0230

MÃ LỚP: T10TH02 GVHD: ĐẶNG THÀNH HẢO

ĐỒNG NAI – NĂM 2023

LỜI CẢM ƠN

Em xin chân thành cảm ơn ban giám hiệu, cùng tất cả các cán bộ, nhân viêntrường Cao Đẳng Hòa Bình Xuân Lộc đã tạo điều kiện cho em học tập trong suốt 2năm vừa qua Cảm ơn quý thầy, quý cô ở khoa công nghệ thông tin đã tận tình truyềnđạt những kiến thức quý báu cho em trong suốt thời gian học tập tại trường

Đặc biệt, em xin gửi lời cảm ơn chân thành nhất đến thầy Đặng Thành Hảo đãtrực tiếp hướng dẫn, giúp đỡ em rất nhiều trong quá trình tìm hiểu, cũng như thực hiệntốt bài báo cáo này

Trong quá trình làm bài báo cáo, với kiến thức của bản thân còn hạn chế khótránh khỏi những thiếu xót Kính mong thầy và nhà trường bỏ qua và đóng góp ý kiến

để em có thêm nhiều kiến thức, kinh nghiệm

Cuối cùng, em xin kính chúc ban giám hiệu, các cán bộ nhân viên và quý thầy,

cô dồi dào sức khỏe, thành công trong công việc và giữ mãi được lòng nhiệt huyết, yêunghề để tiếp tục sứ mệnh cao đẹp là truyền đạt kiến thức cho thế hệ mai sau

Em xin chân thành cảm ơn

Sinh viên thực tập

Nguyễn Lâm Thùy Trâm

Downloaded by Huyen DO (tailieuso.16@gmail.com)

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc lập – Tự do – Hạnh phúc

PHIẾU NHẬN XÉT CỦA ĐƠN VỊ THỰC TẬP

Họ tên học sinh: NGUYỄN LÂM THÙY TRÂM

Lớp: Tin học văn phòng 2

Khoa: Công nghệ thông tin - Khóa 10

Thời gian thực tập: 05/06/2023 - 06/07/2023

Tại đơn vị (doanh nghiệp/ công ty): Trường cao đẳng Hòa Bình Xuân Lộc

Địa chỉ: Ấp Lộ Đức, xã Hố Nai 3, huyện Trảng Bom, tỉnh Đồng Nai

Đơn vị thực tập có một số nhận xét, đánh giá như sau:

1/ Về ý thức tổ chức kỷ luật:

2/ Về tinh thần thái độ học tập:

3/ Về quan hệ, lối sống:

4/ Các nhận xét khác:

Đánh giá chung sau khi thực tập:

Điểm đánh giá quá trình thực tập: /10

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

Họ tên học sinh: Nguyễn Lâm Thùy Trâm

Lớp: Tin học văn phòng 2

Khoa: Công nghệ thông tin - Khóa 10

Giáo viên hướng dẫn có một số nhận xét, đánh giá như sau:

1/- Quá trình thực tập tốt nghiệp tại đơn vị thực tập:

2/- Thực hiện báo cáo thực tập tốt nghiệp:

Đánh giá chung sau khi thực tập:

Kết quả đạt được sau khi thực tập: Điểm đánh giá quá trình thực tập: /10

Bằng chữ:

Ngày …… tháng ……năm ………

GIÁO VIÊN HƯỚNG DẪN

(Ký và ghi rõ họ tên)

ii

Downloaded by Huyen DO (tailieuso.16@gmail.com)

NHẬT KÝ THỰC TẬP TỐT NGHIỆP

Họ tên SV/HS: Nguyễn Lâm Thùy Trâm

Lớp: Tin Học Văn Phòng 2 - Ngành: Công Nghệ Thông Tin - Khóa 10

Cơ quan thực tập: Trường cao đẳng Hòa Bình Xuân Lộc

Địa chỉ cơ quan: ấp Lộ Đức, xã Hố Nai 3, huyện Trảng Bom, tỉnh Đồng Nai

Tuần Ngày/tháng/ năm Nội dung công việc được giao Nhận xét của đại diện đơn vị thực tập

1 10/6/2023 Nhận biết nội dung công việc  Hoàn thành  Hoàn thành tốt

Ngày … tháng … năm 2023

NHÀ GIÁO(ký ghi rõ họ tên)

MỤC LỤC

LỜI CẢM ƠN

PHIẾU NHẬN XÉT CỦA ĐƠN VỊ THỰC TẬP i

PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN ii

NHẬT KÝ THỰC TẬP TỐT NGHIỆP iii

MỤC CÁC TỪ VIẾT TẮT iv

MỤC LỤC v

LỜI NÓI ĐẦU 1

CHƯƠNG 1: GIỚI THIỆU TRƯỜNG CAO ĐẲNG HÒA BÌNH XUÂN LỘC 2

1.1 THÔNG TIN CHUNG VỀ TRƯỜNG 2

1.2 LỊCH SỬ PHÁT TRIỂN VÀ THÀNH TÍCH CỦA TRƯỜNG 2

1.2.1 Khái quát về lịch sử phát triển 2

1.2.2 Cơ cấu tổ chức và nhân sự của nhà trường 3

1.2.3 Các nghề đào tạo và quy mô đào tạo của trường 4

1.2.4 Tầm nhìn – Sứ mệnh 5

CHƯƠNG 2: TÌM HIỂU VÀ TẠO 1 TRANG CHỦ WEBSITE BẰNG FIGMA 6

1.1 NHIỆM VỤ ĐƯỢC GIAO TẠI TRƯỜNG 6

1.2 QUY TRÌNH TÌM HIỂU, CÀI ĐẶT VÀ TẠO WEBSITE BẰNG FIGMA 6

1.2.1 Figma là gì? 6

2.2.2 Tính năng ưu điểm và nhược điểm 6

2.2.3 Một số lưu ý khi dùng ứng dụng 7

2.2.4 Sự quan trọng và thiết thực của ứng dụng 7

2.2.5 Cách cài đặt Figma 7

2.2.6 Cách thiết kế 1 trang chủ website bằng Figma 8

1.3 NHIỆM VỤ VÀ KẾT QUẢ ĐÃ ĐẠT ĐƯỢC 14

1.4 KIẾN THỨC ĐÃ HỌC TẠI TRƯỜNG PHỤC VỤ TRONG CÔNG VIỆC TẠI NƠI THỰC TẬP 14

1.5 NHỮNG KHÓ KHĂN, HẠN CHẾ VỀ CHUYÊN MÔN, KIẾN THỨC, KỸ NĂNG NGHỀ, KỸ NĂNG MỀM… TRONG QUÁ TRÌNH THỰC TẬP 14

CHƯƠNG 3: NHẬN XÉT – ĐÁNH GIÁ – KẾT LUẬN 15

1.1 NHẬN XÉT 15

1.2 ĐÁNH GIÁ 15

1.3 KẾT LUẬN 15

DANH MỤC TÀI LIỆU THAM KHẢO 16

vi

Downloaded by Huyen DO (tailieuso.16@gmail.com)

LỜI NÓI ĐẦU

Ngày nay, chúng ta có thể thấy rõ được sự phát triển nhanh chóng của ngànhcông nghệ thông tin Đặc biệt là các hệ thống máy tính, đã trở thành phương tiệnthông tin đại chúng trong đơn vị hành chính, kinh tế, nhà trường và mọi nơi, mọichỗ, trong các gia đình… cùng những ứng dụng của nó trong cuộc sống hằng ngày,

đã trở thành công cụ đắc lực phục vụ cho các hoạt động của con người Sự phát triểncủa internet và mạng lưới thông tin toàn cầu cũng là một phương tiện giúp cho nhàtrường dễ dàng quản lý học sinh sinh viên cũng giúp gia đình và nhà trường dễ dàngliên lạc với nhau để trao đổi thông tin, nắm bắt lịch học của học sinh, để các bậc phụhuynh dễ dàng quản lý con em trong tập hơn

Để quản lý được tất cả dữ liệu bao gồm thông tin cá nhân, điểm và kết quảhọc tập của học sinh sinh viên trong trường, người quản lý cần công cụ hỗ trợ giúpcho việc quản lý trở nên dễ dàng hơn, các phần mềm hỗ trợ cho công việc quản lýthông tin học sinh sinh viên ở các trường Đại học, Cao đẳng, THPT, và một sốtrường THCS hay Tiểu học cũng áp dụng một số chương trình quản lý đào tạo nhưBSC EMIS, SIMS, IU, EduMan,… ngoài các chương trình này ra, một số trườngcũng sử dụng phần mềm Microsoft Access, Microsoft Excel để quản lý thông tin họcsinh

Trường Cao đẳng Hòa Bình Xuân Lộc cũng quản lý học sinh sinh viên quachương trình quản lý đào tạo BSC EMIS và phần mềm quản lý Microsoft Access đểquản lý tất cả thông tin của học sinh sinh viên trong trường Vì vậy, em chọn đề tàibáo cáo thực tập tốt nghiệp của mình là “Quản lý dữ liệu phòng công tác học sinhsinh viên” để cho mọi người biết rõ hơn không chỉ về các quy định khi làm đơn từ,giấy tờ hay việc quản lý, kiểm tra thông tin học sinh sinh viên mà còn muốn cho mọingười, đặc biệt là các bậc phụ huynh học sinh biết được, nhờ có các tài liệu thông tinquản lý thì nhà trường có thể dễ dàng thông báo với các bậc phụ huynh tình hình họctập của con em mình tại trường Và qua sự hợp tác của nhà trường với phụ huynh thì

sẽ mau chóng giúp đỡ các bạn học sinh ngày càng một phát triển thành con ngườitoàn diện

Downloaded by Huyen DO (tailieuso.16@gmail.com)

CHƯƠNG 1: TỔNG QUÁT VỀ TRƯỜNG CAO ĐẲNG HÒA BÌNH XUÂN LỘC 1.1 Thông tin chung về trường

Hình 1.1

 Tên trường (tiếng Việt và tiếng Anh)

Tiếng Việt : TRƯỜNG CAO ĐẲNG HÒA BÌNH XUÂN LỘC

Tiếng Anh : Hoa Binh Xuan Loc College

 Tên trước đây (nếu có): TRƯỜNG TRUNG CẤP NGHỀ HÒA BÌNH

(TRƯỜNG TCN HÒA BÌNH)

 Cơ quan/Bộ chủ quản: Tòa Giám Mục Xuân Lộc

 Địa chỉ trường: ấp Lộ Đức, xã Hố Nai 3, huyện Trảng Bom, tỉnh Đồng Nai

 Thông tin liên hệ: Số điện thoại : 0251.3980.789

E-mail: caodanghoabinhxuanloc@gmail.com

Website: caodanghoabinhxuanloc.edu.vn

 Năm thành lập trường (theo quyết định thành lập):

- Trường Trung cấp nghề Hòa Bình: theo Quyết định số 1800/QĐUBND ngày09/6/2008 của UBND tỉnh Đồng Nai

- Trường Cao Đẳng Hòa Bình Xuân Lộc: Trường được thành lập theo Quyết định

số 1156/2017/QĐ-BLĐTBXH ngày 19/07/2017 của Bộ Lao động Thương Binh và XãHội trên cơ sở nâng cấp Trường Trung Cấp Nghề Hòa Bình - Thời gian bắt đầu đào tạokhóa I

- Trường Trung cấp nghề Hòa Bình: năm 2012 – 2013 đào tạo nghề, năm 2015 –

2016 đào tạo Văn hóa hệ GDTX

- Trường Cao đẳng Hòa Bình Xuân Lộc: năm 2017

 Loại hình trường đào tạo: Tư thục

1.2 Thông tin khái quát về lịch sử phát triển và thành tích nổi bật của trường 1.2.1 Khái quát về lịch sử phát triển:

- Trường trung cấp nghề Hòa Bình là trường ngoài công lập trực thuộc Tòa GiámMục Xuân Lộc (Ban Bác ái Caritas Xuân Lộc), được thành lập từ năm 2008 theoQuyết định số 1800/QĐ-UBND ngày 09/6/2008 của UBND tỉnh Đồng Nai

- Năm 2012 trường bắt đầu tuyển sinh khóa đầu tiên với 9 nghề hệ trung cấp

- Năm 2017 trước yêu cầu của xã hội về nguồn lao động có kỹ thuật cao nhằm đápứng cho sự nghiệp CNH-HĐH trường đã được Bộ Lao Động TB&XH nâng cấp thành

Trường cao đẳng Hòa Bình Xuân Lộc đào tạo ở hai cấp trình độ trung cấp và cao đẳngnghề với 10 khoa và 19 nghề như sau:

• Khoa Công nghệ thông tin: Đào tạo nghề Quản trị mạng; nghề Tin học vănphòng; nghề Sửa chữa lắp ráp máy tính

• Khoa Điện lạnh: Đào tạo nghề KT máy lạnh và điều hòa không khí và nghề Vậnhành sửa chữa thiết bị lạnh

• Khoa Điện: Đào tạo nghề Điện công nghiệp

• Khoa Mỹ thuật ƯD: Đào tạo các nghề Mộc xây dựng và trang trí nối thất; Giacông thiết kế sản phẩm mộc; nghề Thiết kế đồ họa

• Khoa May: Đào tạo các nghề May thời trang; Sửa chữa thiết bị may

• Khoa Cơ khí: Đào tạo các nghề Nguội sửa chữa máy công cụ, Hàn

• Khoa Ô tô: Đào tạo nghề Công nghệ ôtô

• Khoa Du lịch: Đào tạo các nghề Hướng dẫn du lịch: Quản trị khách sạn; Nghiệp

vụ nhà hàng; Quản trị lữ hành

• Khoa Kế toán: Đào tạo nghề Kế toán doanh nghiệp

• Khoa Văn hóa: giảng dạy các văn hóa hệ giáo dục thuờgn xuyên theo quy định

Bộ Giáo dục & Đào tạo

Để thực hiện nhiệm vũ theo yêu cầu đặt ra nhà trường đã được sự quan tâm, đầu tưcủa Tòa Giám Mục Xuân Lộc, Ban Bác Ái Xã Hội trực thuộc Giáo phận Xuân Lộc và

sự đồng thuận của các cấp có thẩm quyền trong tỉnh tạo điều kiện cho phép trường xâydựng, cải tạo và nâng cấp trường được chia thành ba giai đoạn:

Giai đoạn I: Từ năm 2008 đến năm 2012

Giai đoạn II: Từ năm 2012 đến năm 2017

Giai đoạn III: Từ năm 2017 đến nay

1.2.2 Cơ cấu tổ chức và nhân sự của nhà trường.

(sơ đồ mô tả cơ cấu tổ chức của nhà trường như hình vẽ)

1.2.3 Các nghề đào tạo và quy mô đào tạo của trường

1 Danh sách các nghề đào tạo theo từng trình độ:

Chia theo trình độ Cao đẳng

nghề

Trung cấp nghề

2 Các loại hình đào tạo của nhà trường:

Chính quy: Cao đẳng nghề, trung cấp nghề; Liên thông trung cấp lên cao đẳng

1.2.4 Tầm nhìn – Sứ mệnh

1 Tầm nhìn: Đến năm 2023, trường Cao đẳng Hòa Bình Xuân Lộc trở thành cơ

sở đào tạo nguồn nhân lực có chất lượng cao Đáp ứng nhu cầu phát triển côngnghiệp hóa – hiện đại hóa của tỉnh Đồng Nai nói riêng, khu vực Đông Nam Bộ

và cả nước nói chung”

2 Sứ mệnh: Đào tạo những kỹ thuật viên và kỹ sư thực hành có đạo đức, kiến

thức và công nghệ cao để đáp ứng nhu cầu công nghiệp hóa – hiện đại hóa củatỉnh Đồng Nai và khu vực

6

Downloaded by Huyen DO (tailieuso.16@gmail.com)

CHƯƠNG 2: NỘI DUNG THỰC TẬP1.1 NHIỆM VỤ ĐƯỢC GIAO TẠI TRƯỜNG.

Với thời đại phát triển hiện nay, lĩnh vực CNTT càng ngày càng phát triển, côngnghệ dịch vụ đáp ứng mọi nhu cần của con người Mang lại nhiều tiện ích giúp conngười, đặc biệt trong lĩnh vực kết nối toàn cầu, lưu trữ và truyền tải chia sẻ thông tin

đã cho ra đời nhiều phần mềm ứng dụng mang khả năng nêu trên đáng kể đến chính là

phần mềm Figma.

Figma cho bạn khả năng sáng tạo không giới hạn giao diện người dùng

(UI/UX), thiết kế tạo mẫu, tạo bài đăng trên các mạng xã hội và nhiều dự án thiết kếkhác

Đối với em là một HSTT, nhà trường, quý khoa CNTT và GVHD đã ưu ái giaocho em trách nhiệm nghiên cứu về phần mềm nêu trên

- Em được giao nhiệm vụ vừa:

+ Tìm hiểu về công cụ Figma

+ Tạo 1 trang chủ website bằng Figma

1.2 QUY TRÌNH TÌM HIỂU, CÁCH TẢI VÀ TẠO 1 TRANG CHỦ WEBSITE BẰNG FIGMA.

1.2.1 KHÁI NIỆM VỀ PHẦN MỀM.

Figma là ứng dụng design UI/UX chạy trên trình duyệt (nền tảng website) vớicác chức năng chính như thiết kế giao diện và trải nghiệm người dùng, thiết kế logo,sticker… và các dự án Phần mềm thiết kế dạng vector và các dữ liệu được lưu trữ trên

hệ thống máy chủ của Figma cơ bản dựa vào thuật toán đám mây

1.2.2 ƯU NHƯỢC ĐIỂM CỦA ỨNG DỤNG.

 Ưu điểm

- Khả năng tương thích với nhiều hệ điều hành như Windows, Linux, MacOS

- Phù hợp làm việc nhóm, ai cũng sẽ được chỉnh sửa nếu được ủy quyền, mọi chỉnh sửa đều được hiện cho người tạo file

- Chia sẻ file nhanh chóng, đơn giản

- Toàn bộ thiết kế được lưu trữ trên hệ thống điện toán đám mây

- Kho plugin cực kỳ đa dạng đáp ứng hầu hết nhu cầu của người dùng hiện nay

- Không bị ảnh hưởng bởi Constraint khi thay đổi kích thước frame của website

- Preview design ngay trên điện thoại chỉ bằng cách sử dụng app Figma Mirror một cách nhanh chóng

- Tăng tính đồng bộ cho thiết kế nhờ tính năng điều chỉnh nudge mặc định

- Dán ảnh trực tiếp từ clip vào shape một cách dễ dàng

- Đo khoảng cách giữa hai đối tượng chỉ bằng cách giữ phím Alt/option trong khi di chuột lên đối tượng khác

- Có thể chọn đối tượng có cùng thuộc tính để thay đổi

- Cung cấp nhiều phím tắt tiện lợi.

- Đổi tên hàng loạt các layer nhanh chóng và đơn giản

 Nhược điểm

- Figma không có bất kì điểm xấu nào, nó có 1 đội ngũ sẵn sàng nghe và chỉnh

sửa mọi bug của người dùng chỉ cần họ báo cáo, tính năng thân thiện với tất cả ngườidùng ở mọi độ tuổi

- Nhược điểm duy nhất là sẽ khiến bợt bớt sáng tạo hơn vì có rất rất nhiềutemplates free cho bạn chọn lựa

1.2.4 Sự quan trọng và thiết thực của ứng dụng.

Ứng dụng này cũng có thể dùng để tạo các bài đăng trên mạng xã hội cùng vớinhiều dự án thiết kế khác Figma cung cấp tài nguyên cho các khâu của quá trình thiết

kế Điểm đặc biệt ở Figma là các công cụ được cung cấp miễn phí hoàn toàn và đượclưu trữ thông qua hệ thống lưu trữ đám mây Figma được xem là phiên bản GoogleDocs dành cho dân thiết kế, cho phép nhiều người cộng tác trực tuyến trong một file.Các lập trình viên có thể cùng chỉnh sửa, thảo luận, theo dõi bản thiết kế ở cùng mộtthời gian, ở các phía máy chủ khác nhau Nhờ công dụng mang tính linh hoạt này màFigma là một công cụ thiết kế được nhiều Designer website ưa chuộng cho các dự ánnhóm hay làm việc từ xa

1.2.5 Cách cài đặt Figma.

- Cách 1: Dùng trực tiếp trên web “https://www.figma.com”.

- Cách 2: Tải app về máy:

+ Bước 1: Vào trang “https://www.figma.com”.

+ Bước 2: Chọn Downloads trong Products.

+ Bước 3: Chọn “Desktop App for macOS” hoặc “Desktop App for Windows” + Bước 4: Chờ file được tải về thành công.

+ Bước 5: Bắt đầu cài đặt.

8

Downloaded by Huyen DO (tailieuso.16@gmail.com)

1.2.6 Cách tạo 1 trang chủ website bằng Figma.

Bước 1: Khởi động figma chọn + Design file.

Hình 1.5.1 Màn hình sau khi đăng nhập vào Figma

Bước 2: Chọn vào Region tool và chọn phần Frame

Hình 1.5.2 Trang thiết kế

Bước 3: Tạo một vùng frame Home Chọn kích thước fullHD với width(W) 1920

và height(H) 1080.

Hình 1.5.3 Tạo frame để thiết kế

Bước 4: Trong phần Fill Chọn màu 15160C cho background của frame.

Hình 1.5.4 Đổi màu nền cho frame

10

Downloaded by Huyen DO (tailieuso.16@gmail.com)

Bước 5: Chọn vào phần Text trên thanh công cụ và điền cũng như desgin text theo ýtưởng.

Hình 1.5.5 Tạo và chỉnh sửa text theo ý tưởngBước 6: Hoàn thành form text theo ý tưởng

Hình 1.5.6 Thêm các text khác nhau

Bước 7: Kéo thả hình từ file trong máy vào frame.

Hình 1.5.7 Thêm hình vào bài thiết kế

Bước 8: Trong Region tool chọn Star.

Hình 1.5.8 Công cụ tạo hình sao

12

Downloaded by Huyen DO (tailieuso.16@gmail.com)

Bước 9: Để hình sau khi kéo thả là star nhấn giữ Ctrl + kéo thả chuột để có thể nhậnđược hình sao theo mong muốn.

Hình 1.5.9 Tạo và thiết kế hình theo ý tưởngBước 10: Tạo những hình tương tự và design kiểu cùng màu theo ý muốn

Hình 1.5.10 Thêm các hình khác theo ý tưởng