Xây dựng website giới thiệu chương trình ptit sakura

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNGKHOA ĐA PHƯƠNG TIỆN Đơn vị thực tập: Trung tâm Đào tạo Quốc tế Giáo viên hướng dẫn: Ths.. LỜI CẢM ƠN Để có thể hoàn thành kỳ thực tập vừa qua một c

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN

Đơn vị thực tập: Trung tâm Đào tạo Quốc tế

Giáo viên hướng dẫn: Ths Nguyễn Thị Thanh Tâm

TRUNG TÂM ĐÀO TẠO

QUỐC TẾ - CIE 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 ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP

Họ và tên sinh viên thực tâp : 

Đơn vị thực tập       : Trung tâm Đào tạo Quốc tế

2 Ý thức học tập:

………

………      ………

3 Quan hệ, giao tiếp tại đơn vị: 

………

………      ………

Xác nhận của cơ quan thực tập

(Ký, ghi rõ họ tên và đóng dấu)

Hà nội , ngày tháng năm

Người đánh giá

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

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH

VIỄN THÔNG

KHOA ĐA PHƯƠNG TIỆN

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA

VIỆT NAM

Độc lập-Tự do-Hanh phúc

ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP

Họ và tên sinh viên: 

Lớp:

Nội dung đánh giá

1 Chấp hành kỷ luật:  (Tốt, Trung bình, hoặc Yếu)

2 Ý thức học tập:  (Tốt, Trung bình, hoặc Yếu)

3 Quan hệ, giao tiếp:  (Tốt, Trung bình, hoặc Yếu)

4 Điểm (Thang điểm 10)

Các ý kiến khác (nếu có):

Ngày     tháng     năm 20…

Giáo viên hướng dẫn thực tập

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

LỜI CẢM ƠN 

Để có thể hoàn thành kỳ thực tập vừa qua một cách tốt đẹp, trước hết emxin cảm ơn nhà trường và các thầy cô đã tạo điều kiện cho chúng em có cơ hộiđược làm việc tại Trung tâm Đào tạo Quốc tế - một nơi lý tưởng để học hỏi vàphát triển bản thân Em cũng xin cảm ơn sự tận tình hướng dẫn của cô NguyễnThị Thanh Tâm trong quá trình hoàn thiện báo cáo Đồng thời em cũng xin cảm

ơn anh Linh, anh Toàn, thầy Phạm Vũ Minh Tú và các bạn đã giúp đỡ, hỗ trợ vàchia sẻ những khó khăn mà em gặp phải trong quá trình thực tập tại Trung tâm,qua đó đã giúp em trau dồi được rất nhiều điều mới lạ Chắc chắn đây sẽ làkhoảng thời gian không thể quên đối với em

Một lần nữa, em xin chân thành cảm ơn! 

MỤC LỤC

PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP 1

LỜI CẢM ƠN 3

MỤC LỤC 4

Chương 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP 5

I Giới thiệu chung 5

II Cấu trúc tổ chức 5

III Tầm nhìn và sứ mệnh của CIE 6

a Tầm nhìn 6

b Sứ mệnh 6

c Những giá trị cốt lõi 6

IV Các chương trình đào tạo,dự án và đối tác của CIE 6

a Đào tạo 6

b Dự án 7

Chương 2: NỘI DUNG THỰC TẬP 8

I Giới thiệu chung 8

a Nội dung công việc: 8

b Kết quả cần đạt: 9

II Quá trình làm việc 9

a Tiếp nhận công việc và nghiên cứu về chủ đề chính của website 9

b Tìm hiểu về website Landing Page 10

c Tìm hiểu về HTML 11

d Tìm hiểu về CSS 13

e Công cụ được sử dụng trong công việc 14

f Nghiên cứu hiệu ứng tạo animation 17

g Nghiên cứu về Meta Tags phục vụ tối ưu SEO 17

Chương 3: KẾT LUẬN 24

I Những kết quả đạt được 24

II Bài học kinh nghiệm 24

III Những điều chưa đạt được 25

IV Kết luận 25

TÀI LIỆU THAM KHẢO 26

Chương 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP

I Giới thiệu chung

Trung tâm Đào tạo Quốc tế (viết tắt là CIE) là đơn vị trực thuộc Học việnCông nghệ Bưu chính Viễn thông (PTIT), trường đại học công lập hàng đầutrong lĩnh vực CNTT&TT tại Việt Nam Trung tâm mang đến những cơ hội tuyệtvời cho tất cả sinh viên của trung tâm để học tập các chương trình đào tạo quốc tế

và gia tăng cơ hội làm việc tại nước ngoài, đồng thời mang đến cho bạn sinh viêntrong nước và quốc tế các chương trình trao đổi và dịch chuyển sinh viên Nhưmột phần trong cam kết của trung tâm về việc mang lại sự tiếp cận tốt nhất tớicác chương trình đào tạo quốc tế cho sinh viên trong nước và sinh viên nướcngoài tại PTIT, CIE cung cấp các chương trình ưu việt với sự kết nối chặt chẽ vớicác đối tác quốc tế với phương pháp tiếp lấy người học làm trung tâm Đồng thời

áp dụng các các chương trình tư vấn linh hoạt được thiết kế để gắn kết sinh viêntrong suốt quá trình nhằm đảm bảo sự thành công của các em trước, trong và saukhi học tập tại CIE

II Cấu trúc tổ chức

b Ban giám đốc trung tâm

 Giám đốc: PGS.TS Hoàng Hữu Hạnh

 Phó giám đốc: ThS Nguyễn Minh Phượng

c Các phòng ban

 Tổ Quản lý Đào tạo: ThS Phạm Trần Cẩm Vân, Quản lý Chương trình 

 Tổ Phát triển Dự án: ThS Phạm Vũ Minh Tú, Quản lý Dự án 

III Tầm nhìn và sứ mệnh của CIE

a Tầm nhìn

Phát triển Trung tâm Đào tạo Quốc tế của PTIT trở thành một trung tâm

về quốc tế hoá trong giáo dục đại học, giáo dục định hướng nghề nghiệp và dịch

vụ đào tạo quốc tế cho xã hội

b Sứ mệnh

 Cung cấp các chương trình đào tạo quốc tế chất lượng để đáp ứng xu hướngphát triển và yêu cầu thực tiễn của các tổ chức, doanh nghiệp và xã hội

 Cung cấp các chương trình đào tạo định hướng nghề nghiệp tiêu chuẩn quốc

tế, nâng cao kỹ năng cho việc phát triển nguồn nhân lực cho các thị trườngnội địa và quốc tế

 Cung cấp các dịch vụ về quốc tế hóa giáo dục và đào tạo có chất lượng chosinh viên, đáp ứng yêu cầu phát triển nhanh của thế giới hiện đại ngày nay

c Những giá trị cốt lõi

 Đề cao sự cởi mở để đón nhận tri thức bên ngoài

 Tích cực chuyển đổi để làm chủ những giá trị mới

 Kiến thiết sự đổi mới sáng tạo vì một thế giới tốt đẹp hơn

IV Các chương trình đào tạo,dự án và đối tác của CIE

a Đào tạo

 Chương trình đại học chất lượng cao

 Chương trình Kỹ sư CNTT bằng Tiếng Anh

 Chương trình du học chuyển tiếp dánh cho sinh viên PTIT sang học tập vànhận bằng tại đại học AIZU, Nhật Bản

 Chương trình liên kết đào tạo cử nhân quốc tế với đại học La Trobe, Australia

 Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học AIZU, Nhât Bản

 Chương trình liên kết đào tạo cử nhân quốc tế với đại học Middlesex, VươngQuốc Anh

 Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học công nghệ (UTS)

 Dự án quảng bá về châu Âu qua công nghệ truyền thông đa phương tiện

c Các đối tác của CIE

Chương 2: NỘI DUNG THỰC TẬP

I Giới thiệu chung

Đề tài: Phát triển website giới thiệu dự án PTIT-SAKURA

a Nội dung công việc:

Công việc 1: Khảo sát sơ bộ về môi trường và cách làm việc nơi thực tập

Công việc 2: Nhận công việc được giao và trao đổi yêu cầu với người hướng dẫn.Công việc 3: Tìm hiểu về quy trình thiết kế và phát triển một website landing

Công việc 6: Hoàn thiện báo cáo thực tập

STT Nội dung thực tập Thời gian Mục tiêu

1 Khảo sát sơ bộ về môi

trường và cách làm việc

nơi thực tập

Từ ngày 19/7 đến 21/7

Tìm hiểu về quy trình làmviệc, cách giao tiếp và vănhóa làm việc của Trung tâm

2 Nhận công việc được

giao và trao đổi yêu cầu

với người hướng dẫn

Từ ngày 22/7 đến ngày 25/7

Nhận đề tài được giao, làm

rõ các yêu cầu cũng nhưđược hướng dẫn sơ bộ tìmhiểu về quy trình làmwebsite

3 Tìm hiểu về quy trình

thiết kế và phát triển một

website landing page

Từ ngày 26/7 đến ngày 3/8

Tìm hiểu về phong cáchthiết kế giao diện, công cụthiết kế cũng như

Tìm hiểu về ứng dụng củaanimation trên website vàcách tối ưu hóa khả năng tìmkiếm với SEO meta tag

6 Hoàn thiện báo cáo thực

tập

Từ ngày 12/8 đến 31/8

b Kết quả cần đạt:

 Tham gia trải nghiệm làm việc trong môi trường thực tế

 Hoàn thành tốt công việc được giao

 Tích cực trong việc trao đổi với các thành viên trong nhóm cũng như với

người hướng dẫn

 Rút ra những kinh nghiệm sau thời gian thực tập

II Quá trình làm việc

a Tiếp nhận công việc và nghiên cứu về chủ đề chính của website

i Giới thiệu về chương trình cầu nối Việt Nhật PTIT-SAKURA

Với bối cảnh quan hệ hợp tác giữa Việt Nam và Nhật Bản ngày càng pháttriển thì nhu cầu về lực lượng chuyên gia kỹ sư Công nghệ Thông tin thành thạotiếng Nhật đang trở nên thực sự cần thiết đối với cả thị trường Nhật Bản lẫn thịtrường Việt Nam Do đó, số lượng người đăng ký học tiếng Nhật tại Việt Nam và

du học sinh Việt tại Nhật Bản cũng ngày càng tăng cao

Chính vì lẽ đó, chương trình liên kết đào tạo giữa Học viện Công nghệBưu chính Viễn thông PTIT và Học viện ngôn ngữ Meros, Tokyo, Nhật Bản đã

được hình thành, với mong muốn vừa rút ngắn thời gian đào tạo cho sinh viênPTIT để các bạn sinh viên vừa có thể thành thạo ngoại ngữ này trong thời gianngắn nhất,

vừa đáp ứng được chuẩn đầu ra cho các doanh nghiệp CNTT tại Nhật Bản cũngnhư các doanh nghiệp CNTT có vốn đầu tư Nhật Bản tại Việt Nam yêu cầu

ii Giới thiệu về Học viện ngôn ngữ Meros, Tokyo Nhật Bản

Tiền thân là trường đào tạo Giáo viên dạy tiếng Nhật cho người nướcngoài, sau mở rộng thành trường đào tạo trực tiếp cho sinh viên nước ngoài sang

Nhật du học Trường thành lập từ năm 1984 khi chính phủ Nhật bắt đầu triển

khai chính sách mời gọi Du học sinh nước ngoài tới Nhật, với 37 năm kinhnghiệm đào tạo cho hơn 10,000 sinh viên nước ngoài đến từ 23 quốc gia trên Thếgiới, Meros sẽ là lựa chọn đáng tin cậy nhất cho sinh viên khi học tiếng Nhật

Chương trình giảng dạy đặc biệt dành riêng cho Du học sinh ngành CNTTduy nhất tại Nhật Bản với 7 năm kinh nghiệm đào tạo chuyên sâu cho sinh viênkhối CNTT có mong muốn đi làm tại các doanh nghiệp CNTT tại Nhật Bản.Đảm bảo đầu ra tại các Doanh nghiệp IT tại Nhật Bản, với mức lương cam kết tối

ii Phân loại Landing page

Có 3 loại landing page chính yếu: Landing page thu thập khách hàng tiềmnăng, landing page bán hàng, landing page trung gian chuyển đổi Mỗi loạilanding page lại phục vụ cho những mục đích khác nhau và chúng cũng có nhữngthành phần giao diện khác nhau:

 Landing page thu thập khách hàng tiềm năng: Có chức năng chính là thu thậpthông tin cơ bản của khách hàng tiềm năng như họ tên, email, số điện thoại để

sử dụng cho các hoạt động marketing sau đó Chính vì lẽ đó nên loại landingpage này thường có một biểu mẫu đăng ký và luôn đi kèm với một lợi ích traođổi với khách hàng để thuyết phục họ điền thông tin vào như ebook, webinar,hội thảo offline, …

 Landing page bán hàng: Có chức năng chính là thuyết phục khách hàng đưa

ra quyết định mua hàng ngay trên landing page Đặc điểm của loại landingpage này là bao gồm những chi tiết như lợi ích khách hàng, đặc điểm nổi bật,phản hồi khách hàng, … giúp khách hàng có đầy đủ thông tin để đưa ra quyếtđịnh mua hàng

 Landing page chuyển đổi trung gian: Với mục tiêu là dẫn dắt khách hàngchuyển hướng tới trang chuyển đổi chính Có đặc điểm là chỉ sử dụng nút kêugọi hành động để chuyển hướng tới trang khác, không sử dụng biểu mẫu đăng

ký Ngoài ra, trong thương mại điện tử, trang Landing Page trung gian sẽcung cấp đầy đủ thông tin về sản phẩm và dẫn dắt khách hàng về trang giỏhàng của website chính

Chương trình PTIT-SAKURA có một trang đích là trang web đăng kýdành cho sinh viên Kết hợp các đặc điểm đã phân tích bên trên, ta có thể nhậnthấy “Landing page chuyển đổi trung gian” là loại website phù hợp nhất với

chương trình vì tính đơn giản, dễ tiếp cận và tương đối thuận lợi để triển khai iii Quy trình phát triển landing page:

 Bước 1: Xác định mục tiêu chuyển đổi

 Bước 2: Xây dựng nội dung trang web để thuyết phục khách hàng thực hiệnhành động

 Bước 3: Thiết kế giao diện Landing page với nội dung đã thiết lập ở bước 2

 Bước 4 : Phát triển website với HTML& CSS

c Tìm hiểu về HTML

i Định nghĩa về HTML

HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trangweb, nghĩa là các mẩu thông tin được trình bày trên World Wide Web.

ii Ưu điểm của HTML

 Nguồn tài nguyên hỗ trợ lớn

 Hoạt động mượt mà trên phần lớn các trình duyệt phổ biến hiện nay

 Cách sử dụng dễ dàng

 Các markup trong HTML ngắn gọn, tính đồng nhất cao

 Mã nguồn mở, miễn phí

 Là một chuẩn web do W3C vận hành

 Dễ dàng tích hợp với nhiều loại ngôn ngữ

iii Nhược điểm của HTML

 Mỗi trang HTML phải được tạo riêng biệt

 Khó kiểm soát được việc đọc và hiển thị tập tin HTML của trình duyệt Điểnhình như một vài trình duyệt lỗi thời không thực hiện được render tag

 Một số ít trình duyệt chậm cập nhật các tính năng hỗ trợ mới của HTML để

có thể đọc, hiểu file một cách chính xác

iv Một số thành phần trong HTML

 Elements: Các element là các chỉ định xác định cấu trúc và nội dung của các

đối tượng trong một trang. Một số yếu tố được sử dụng thường xuyên hơnbao gồm nhiều cấp độ tiêu đề (được xác định là <h1> đến <h6>) và đoạn văn(được xác định là <p>), …

 Tags: Việc sử dụng các dấu ngoặc nhỏ hơn và lớn hơn bao quanh một

element sẽ tạo ra cái được gọi là thẻ Có 2 loại thẻ chính trong HTML là thẻ

mở và thẻ đóng Ví dụ thể mở: <div> Ví dụ thẻ đóng: </div> Nội dung giữathẻ mở và thẻ đóng là nội dung chính của element đó.

 Attributes: Các attribute là các thuộc tính được sử dụng để cung cấp thông

tin bổ sung về một element. Các thuộc tính phổ biến nhất bao gồm thuộc tính

id, xác định một element; các thuộc tính class, phân loại một element; thuộctính src, trong đó xác định một nguồn cho nội dung nhúng; và thuộc tính href,cung cấp một tham chiếu hyperlink đến một tài nguyên được liên kết

ii Ưu điểm của CSS

 Một stylesheet thường sẽ được lưu trữ trong bộ nhớ cache của trình duyệt,

và do đó có thể được sử dụng trên nhiều trang mà không được nạp lại, tăngtốc độ tải và giảm độ truyền dữ liệu qua mạng

 Dễ dàng định dạng lại hoặc cải tiến thêm

 Có tính linh hoạt cao

 Tính nhất quán cao, có thể ảnh hưởng và tác động lên nhiều thành phần củamột trang web một cách dễ dàng và đồng bộ

iii Nhược điểm của CSS

 Thiếu các biến, gây một số hạn chế nhất định trong việc thay đổi màu sắchoặc độ cao …

 Các trình duyệt khác nhau có thể hiển thị CSS theo nhiều cách khác nhau

iv Một số thành phần trong CSS

 Selectors: có tác dụng chỉ định chính xác thành phần nào trong HTML để

có thể tác động chính xác lên nó Các selector thường nhắm vào một giá trịthuộc tính như id hay class hoặc là một phần tử ví dụ như <p> hay <h1>

 Properties: Khi một phần tử được chọn, một thuộc tính sẽ xác định các

kiểu sẽ được áp dụng cho phần tử đó. Tên thuộc tính nằm sau selector,trong dấu ngoặc nhọn {} và ngay trước dấu hai chấm Có rất nhiều thuộctính chúng ta có thể sử dụng, chẳng hạn như background, color, font-size, height, và width, …

 Values: Dùng để xác định và đo lường giá trị của một properties.

e Công cụ được sử dụng trong công việc

i Công cụ thiết kế website: Figma

Figma là công cụ được ra mắt vào năm 2016, với giao diện thân thiện vàtính dễ sử dụng, Figma đã nhanh chóng nổi lên và trở thành một công cụ thiết kếgiao diện người dùng phổ biến trong cộng đồng công nghệ toàn cầu Một sốthương hiệu lớn sử dụng Figma cho tới thời điểm hiện tại có thể kể đến nhưMicrosoft, Twitter, GitHub, Dropbox …

Khác với những công cụ thiết kế trước đây, Figma được thiết kế trên nềntảng đám mây Đây là công cụ có tính năng tương tự như Sketch, tuy nhiên nó hỗtrợ làm việc nhóm tốt hơn

Một số tính năng của nổi bật của Figma:

 Figma có thể hoạt động tương thích trên tất cả các hệ điều hành có trình duyệtweb, từ Windows, Linux, Macs cho đến Chromebooks đều có thể dùng công

cụ này Tính tới thời điểm này, đây là công cụ thiết kế duy nhất có thể làmđược điều này Tất cả người dùng có thể chia sẻ, mở hay chỉnh sửa một fileFigma dễ dàng dù đang dùng bất kỳ hệ điều hành nào

 Là một công cụ browser-based, vậy nên mọi người trong team có thể dễ dànglàm việc với nhau tương tự như làm việc trên Google Docs Mỗi thành viêntrong nhóm đang xem hoặc chỉnh sửa file, Figma sẽ hiển thị đại diện bằngmột avatar tròn trên thanh công cụ với tên riêng Đây là một chức năng rấttiện khi bạn muốn biết ai đang làm việc trên file

 Người dùng có thể chia sẻ file Figma bằng việc gửi link, người nhận link sẽ

có khả năng truy cập vào file đó Nếu bạn lựa chọn Link to selected framengười nhận sẽ nhìn thấy ngay frame bạn đang chọn lúc chia sẻ Đây là tínhnăng được rất nhiều designer sử dụng

 Tất cả mọi thứ đều được lưu trữ online một cách tự động trong khi ngườidùng đang làm việc trên Figma

 Hiện nay, Figma có một kho plugin có sẵn phong phú và miễn phí

 Tích hợp sẵn khả năng Prototype nhanh chóng và dễ dàng