Tải bản đầy đủ (.docx) (25 trang)

Xây dựng website giới thiệu dự án la trobe

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.14 MB, 25 trang )

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO
THỰC TẬP TỐT NGHIỆP
Đề tài: XÂY DỰNG WEBSITE GIỚI THIỆU DỰ ÁN
LA TROBE

Nơi 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

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


QUỐC TẾ - CIE


Độ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 quốc tế - Học viện bưu chính viễn thơng
Thời gian thực tập:
NHẬN XÉT CỦA CƠ SỞ THỰC TẬP
1. Chấp hành nội quy và quy định của cơ quan:
……...……………………………………………………………………………………
……...……………………………………………………………………………………
...…………………………………………………………………………………………
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

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

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

Người đánh giá
(Ký và ghi rõ họ tên)

ii



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

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

KHOA ĐA PHƯƠNG TIỆN

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

ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP
(Thời gian thực tập: Từ ngày 19/07/2021 đến ngày 31/08/2021)
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)

iii


LỜI CẢM ƠN
Trước tiên với tình cảm sâu sắc và chân thành nhất, cho phép em được bày
tỏ lòng biết ơn đến tất cả các cá nhân và tổ chức tại Trung tâm Đào tạo Quốc tế PTIT
tại Học viện Cơng nghệ Bưu chính Viễn thơng đã tạo điều kiện hỗ trợ, giúp đỡ em
trong suốt quá trình học tập và nghiên cứu đề tài xây dựng website giới thiệu về dự án
La Trobe. Trong suốt thời gian từ khi bắt đầu học tập tại trường đến nay, em đã nhận
được rất nhiều sự quan tâm, giúp đỡ của quý Thầy Cơ và bạn bè.
Với lịng biết ơn sâu sắc nhất, em xin gửi đến quý Thầy Cô ở Khoa Đa
phương tiện đã truyền đạt vốn kiến thức quý báu cho chúng em trong suốt thời gian
học tập tại trường. Nhờ có những lời hướng dẫn, dạy bảo của các thầy cơ nên đề tài
nghiên cứu của em mới có thể hoàn thiện tốt đẹp. Một lần nữa, em xin chân thành cảm
ơn thầy/cô – người đã trực tiếp giúp đỡ, quan tâm, hướng dẫn em hoàn thành tốt bài
báo cáo này trong thời gian qua.
Bài báo cáo thực tập thực hiện trong khoảng thời gian gần 6 tuần. Bước đầu đi
vào thực tế của em còn hạn chế và cịn nhiều bỡ ngỡ nên khơng tránh khỏi những thiếu
sót , em rất mong nhận được những ý kiến đóng góp q báu của q Thầy Cơ để kiến
thức của em trong lĩnh vực này được hoàn thiện hơn đồng thời có điều kiện bổ sung,
nâng cao ý thức của mình.
Em xin chân thành cảm ơn!

iv



MỤC LỤ

LỜI CẢM ƠN............................................................................................................IV
PHẦN 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP...........................................................1
1.1. Chức năng..............................................................1
1.2. Tổ chức..................................................................1
1.3. Các lĩnh vực hoạt động............................................3
1.3.1. Các hoạt động trong lĩnh vực giáo dục.............................................3
1.3.2. Các hoạt động, sự kiện......................................................................3
PHẦN 2: NỘI DUNG THỰC TẬP.............................................................................6
2.1. Giới thiệu chung.....................................................6
2.2. Nội dung thực tập...................................................7
2.2.1. Giới thiệu về Figma...........................................................................7
2.2.2. Giới thiệu về HTML..........................................................................8
2.2.3. Giới thiệu về UI, UX..........................................................................9
2.2.4. Giới thiệu về CSS.............................................................................11
2.2.5. Giới thiệu về Javascript...................................................................12
2.2.6. Sản phẩm.........................................................................................15
PHẦN 3: KẾT LUẬN................................................................................................19
3.1. Bài học kinh nghiệm.............................................19
3.2. Những việc đã làm được và hạn chế.......................19
3.3. Kết luận...............................................................19

v


Phần 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP
1.1. Chức năng
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ện Cơng
nghệ Bưu chính Viễn thông (PTIT), trường đại học công lập hàng đầu trong lĩnh vực

CNTT&TT tại Việt Nam. Mang đến những cơ hội tuyệt vời cho tất cả sinh viên để 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ên trong 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 về việc mang lại sự tiếp cận tốt
nhất tới các chương trình đào tạo quốc tế cho sinh viên trong nước và sinh viên nước
ngoà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ới cá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ên trong suốt q
trình nhằm đảm bảo sự thành cơng của các em trước, trong và sau khi học tập tại CIE.
Các chương trình bao gồm:
• Chương trình liên kết đào tạo quốc tế bậc ại học và thạc sĩ (2+2, 3+1, 1+1) và
Tiến sĩ.
• Chương trình trao đổi và dịch chuyển sinh viên cho sinh viên trong nước và
quốc tế.
• Chương trình du học kết nối cho sinh viên tốt nghiệp làm việc tại thị trường lao
động tồn cầu
• Các khóa học định hướng nghề nghiệp từ cơ bản đến nâng cao để giúp sinh
viên có khả năng làm việc ngay sau khi tốt nghiệp.

1.2. Tổ chức
Để đảm bảo tính linh hoạt cao u cầu các hoạt động có hiệu quả thì phải tổ
chức bộ máy hoạt động với quy mô hợp lý nhất, tối ưu nhất, mọi khó khăn sai lầm phải
được khắc phục kịp thời. Các bộ phận chức năng phải có sự liên kết hỗ trợ lẫn nhau để
thực hiện các mục tiêu đặt ra. Phương pháp quản lý theo phương pháp trực tuyến.
Giám đốc quản lý toàn bộ hoạt động có kế hoạch điều chỉnh kịp thời và các bộ phận
chức năng chịu sự chỉ đạo trực tuyến từ giám đốc. Mối quan hệ quản lý này có ưu
điểm là gọn nhẹ về tổ chức thông tin được đảm bảo thông suốt, đường đi của thông tin
1



là ngắn do đó sai lệch của thơng tin là không lớn phù hợp với chế độ một thủ trưởng
lãnh đạo. Nhiệm vụ được quy định theo nguyên tắc tập trung dân chủ trong quản lý.
Cơ cấu này đảm bảo nguồn lực để giải quyết các vấn đề trọng tâm. Bộ máy tổ chức
được thể hiện qua sơ đồ sau.
Ban giám đốc của trung tâm bao gồm:
- Giám đốc: PGS. TS. Hồng Hữu Hạnh
- Phó giám đốc: ThS.Nguyễn Minh Phượng
Các tổ:
- 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 Minh Tú, quản lý dự án
Thông điệp từ giám đốc trung tâm:
Đổi mới giáo dục đại học trong thời kỳ hội nhập quốc tế là một tiến trình lâu dài
để phát triển các cơ sở giáo dục đại học sánh tầm quốc tế trong các mục tiêu cung cấp
các chương trình học thuật chất lượng cao và hướng đến hội nhập quốc tế. Trong tiến
trình này, quốc tế hố giáo dục đại học được xác định là mục tiêu và địn bẩy cho sự
chuyển mình của giáo dục đại học Việt Nam hướng đến cung cấp các chương trình
giáo dục, trao đổi, chuyển dịch, công nhận học thuật đa dạng đến người học.
Trung tâm Đào tạo Quốc tế của Học viện Cơng nghệ Bưu chính Viễn thơng
mang trong mình Sứ mạng cung cấp các chương trình đào tạo quốc tế chất lượng tốt,
các chương trình đào tạo định hướng nghề nghiệp và nâng cao kỹ năng theo các tiêu
chuẩn quốc tế; và các dịch vụ về quốc tế hoá giáo dục và đạo tạo có chất lượng cho
sinh viên và xã hội để đáp ứng xu hướng phá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 trong sự phát triển nhanh chóng của thế giới hiện đại
ngày nay.
Để hoàn thành các sứ mạng này, chúng tơi tích cực và chủ động xúc tiến hợp tác
với các đối tác quốc tế là các đại học có uy tín trên thế giới, là các tổ chức nghề nghiệp
quốc tế cũng như các tổ chức hợp tác phát triển giáo dục khá. Chúng tôi cam kết mang
đến cho người học tại Trung tâm Đào tạo Quốc tế các chương trình học tập và mơi
trường sinh hoạt có chất lượng quốc tế mang theo các giá trị cốt lõi của chúng tôi: Cởi


2


mở (Openness), Làm chủ tri thức (Ownership), Thay đổi (Transformation) và Sáng tạo
(Innovation).

1.3. Các lĩnh vực hoạt động
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ên cạnh đó, CIE cịn đóng vai trị kết nối giữa doanh nghiệp và
các bạn designer đã từng học tập tại trung tâm.
1.3.1. Các hoạt động trong lĩnh vực giáo dục
- Các khóa học:
 Chương trình đại học chất lượng cao
 Chương trình kỹ sư cơng nghệ thơng tin bằng tiếng anh
 Chương trình liên kết quốc tế
 Khóa học ngắn hạn
- Các dự án:
 Dự án proEUHE - ERAMUS + JEAN MONNET
 AVIS Plus
1.3.2. Các hoạt động, sự kiện

Hình 1. 1. Hội thảo tư vấn tuyển sinh trực tuyến chương trình du học ngành
CNTT đại học La Trobe và PTIT
3


Hình 1. 2. Trung tâm đào tạo quốc tế (PTIT) tổ chức Europe 2021

Hình 1. 3. Bế mạc giải bóng đá sinh viên CIE - CUP 2021


Hình 1. 4. Khởi động dự án quảng bá về châu âu qua công nghệ truyền thông đa
phương tiện
4


Hình 1. 5. Hội thảo về quy trình phát triển game với chuyên gia đến từ Gameloft

5


Phần 2: NỘI DUNG THỰC TẬP
2.1. Giới thiệu chung
Đề tài: Xây dựng website giới thiệu về dự án La Trobe (Landing Page)
Nội dung công việc:
- Công việc 1: Khảo sát sơ bộ về môi trường làm việc nơi thực tập
- Cơng việc 2: Tìm hiểu các kiến thức cơ bản về thiết kế trong dự án
- Công việc 3: Nhận công việc, trao đổi yêu cầu với người hướng dẫn
- Cơng việc 4: Thiết kế và hồn thiện sản phẩm
Bảng 2. 1. Kế hoạch thực hiện báo cáo thực tập
TT

Nội dung thực tập
Khảo sát sơ bộ về

1

mơi

trường


làm

việc nơi thực tập
Tìm hiểu các kiến
2

thức cơ bản về
thiết kế trong dự án

Thời gian

Mục tiêu
Tìm hiểu về mơi trường làm việc, cơ cấu tổ

Từ ngày 19/7

chức của công ty, chức năng, nhiệm vụ các

đến ngày 24/7

phịng ban,…
Tìm hiểu về các phong cách thiết kế đồ họa,

Từ ngày 25/7 các nội dung chủ đề phù hợp với website.
đến ngày 28/7

Tham gia vào một quy trình hồn thiện
website .


Nhận cơng việc,
trao đổi u cầu Từ ngày 29/7 Lên ý tưởng, phác thảo, tương tác cho công

3

với người hướng đến ngày 3/8

việc được giao.

dẫn
4

Thiết kế sản phẩm

Thực hiện và hồn thiện các cơng việc được

Từ ngày 4/8

phân công, trao đổi công việc liên tục với

đến ngày 10/8

người hướng dẫn và nhóm làm việc.

Hồn thiện báo cáo Từ ngày 20/8

5

thực tập


đến ngày 31/8

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

Hiểu và tham gia vào quy trình tạo nên website hồn chỉnh.
6


-

Hồn thành tốt các trách nhiệm được giao.

-

Có sự trao đổi về các nội dung cơng việc với nhóm thực hiện.

-

Thích nghi với mơi trường làm việc chun nghiệp.

-

Rút ra những bài học kinh nghiệp sau thời gian thực tập tại đơn vị.

2.2. Nội dung thực tập
- Giới thiệu chung trang website giới thiệu dự án La Trobe: Trang web của trung
tâm đào tạo quốc tế sẽ gồm phần giới thiệu về đại học La Trobe, chương trình liên kết
đào tạo cử nhân quốc tế với đại học La Trobe, thơng tin về những sinh viên tiêu biểu
và thành tích nổi trội trong trường và cuối cùng là phần tin tức, thông tin về trường đại

học...
- Trong sản phẩm này nhóm em sử dụng cơng cụ figma để thiết kế và phác thảo
giao diện, phần lựa chọn màu sắc là đỏ trắng và xanh vì đó là màu chủ đạo của trung
tâm đào tạo CIE và đại học La Trobe. Sau khi hồn thành và thống nhất về giao diện
nhóm em triển khai phần code để tạo website hoàn chỉnh.
2.2.1. Giới thiệu về 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ệ tồ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ền
tả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ệt
web, 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 file Figma 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àng
làm việc với nhau tương tự như làm việc trên Google Docs. Mỗi thành viên trong
nhóm đang xem hoặc chỉnh sửa file, Figma sẽ hiển thị đại diện bằng một avatar tròn

7


trên thanh công cụ với tên riêng. Đây là một chức năng rất tiệ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 frame người nhận sẽ
nhìn thấy ngay frame bạn đang chọn lúc chia sẻ. Đây là tính nă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ười dù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.
2.2.2. Giới thiệu về HTML
HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web,
nghĩa là các mẩu thơng tin được trình bày trên World Wide Web.
- Ư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ữ.
- Nhược điểm của HTML


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



Khó kiểm sốt được việc đọc và hiển thị tập tin HTML của trình duyệt.

Điển hì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.
- 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ơn bao
8


gồm nhiều cấp độ tiêu đề (được xác định là

đến

) và đoạn văn (được xác
định là

), …


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ữa thẻ 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ộc tí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.
2.2.3. Giới thiệu về UI, UX
“UI” là cụm từ đại diện cho thiết kế website “Giao diện người dùng” và “UX”
có thể hiểu là “Trải nghiệm người dùng”. Hai khái niệm này luôn đi đôi và song


hành cùng nhau, trở thành tiêu chuẩn quan trọng để đánh giá các website bất kì.
Trong nhiều sản phẩm website đã thực hiện, phần lớn các khách hàng đều thẩm
định xem trang web của mình có đạt tiêu chuẩn về UI/UX khơng, sau đó mới xem đến
các chức năng cụ thể hay hiệu suất hoạt động. Một website chất lượng phải có UI tốt,
UX tốt, ít bug, hạn chế crash.

Công nghệ thiết kế UI (Giao diện người dùng): UI trong lĩnh vực thiết kế
được gọi là sự truyền tải thông điệp từ nhà thiết kế – nhà cung cấp dịch vụ (sản phẩm)
9


tới người sử dụng. Trong thiết kế web, thiết kế UI là quá trình các nhà thiết kế tạo ra
các giao diện web, các thành tố trên trang web dựa trên các thói quen, hành vi lướt
web của đại đa số người dùng. Để cho ra đời bản thiết kế này, các nhà thiết kế cần trải
qua quá trình nghiên cứu, tổng hợp và thống kê các thông tin, số liệu sao cho sản phẩm
cuối cùng chính xác và có thể làm đúng nhiệm vụ của nó – thu hút người dùng và
mang lại cảm tình với họ.
Cơng nghệ thiết kế UX (Trải nghiệm người dùng): UX là cách mà người
dùng cảm nhận về một sản phẩm cụ thể, người làm về UX goi là UX Designer. Nếu
công nghệ thiết kế UI tập trung chú trọng vào phần nhìn, phần hiển thị bên ngồi thì
với UX, các lập trình viên sẽ tiến hành cấu hình các yếu tố về kĩ thuật bên trong
website sao cho khi vận hành, khởi chạy website chính thức, người dùng có thể truy
cập và sử dụng các chức năng (như thanh trượt, các nút button, lướt trang…) một cách
“mượt” và tiện lợi nhất.
Công nghệ thiết kế UI, UX mặc dù khác biệt nhưng lại có mối liên quan chặt chẽ
với nhau. Dù bạn có thể tạo một giao diện chuẩn UI, đẹp mắt nhưng nếu làm phần UX
cũng như tính năng kỹ thuật bên trong khơng tốt, gây khó khăn cho người dùng trong
q trình sử dụng thì sản phẩm của bạn cũng khơng được đánh giá cao.
Quy trình thiết kế UI/UX cơ bản trong trang web La Trobe
1. Nghiên cứu nội dung và định hướng phát triển, tầm nhìn của chủ sở hữu


website.
2. Tìm hiểu câu chuyện về trường đại học La Trobe và trung tâm đào tạo quốc tế

(CIE) và hình ảnh đại diện của 2 trường.
3. Lên mẫu phác thảo cơ bản, tiến hành thiết kế giao diện UI dựa trên các thông

tin đã thu thập được
4. Tiến hành thiết kế giao diện người dùng UI bằng phần mềm thiết kế chuyên

dụng như figma
5. Trao đổi với các thành viên trong nhóm, cho phép họ khảo nghiệm và chọn lọc,

đồng thời đưa ra các feedback cụ thể để thay đổi và chỉnh sửa giao diện khi cần
thiết.
6. Tiến hành xây dựng phiên bản UX của website thơng qua các phần mềm lập

trình cụ thể
10


7. Hoàn thiện sản phẩm.

2.2.4. Giới thiệu về CSS
CSS (Cascading Style Sheets): định nghĩa về cách hiển thị của một tài liệu
HTML. CSS đặc biệt hữu ích trong việc thiết kế Web. Nó giúp cho người thiết kế dễ
dàng áp đặt các phong cách đã được thiết kế lên bất kì page nào của website một cách
nhanh chóng, đồng bộ.
- Ư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ăng tố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ủa
một trang web một cách dễ dàng và đồng bộ.
- 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ắc hoặ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.
- 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ư

hay

.
+ 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ộc tí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
2.2.5. Giới thiệu về Javascript

11


JavaScript là một loại ngơn ngữ lập trình được sử dụng chủ yếu trong HTML và
website với mục đích phát triển các ứng dụng internet được chạy trên server và client.
Nó có khả năng hỗ trợ bởi hầu hết mọi trình duyệt web và nó bao gồm: ngơn ngữ lập
trình được áp dụng chủ yếu trong HTML và web nhằm phát triển Chrome, Safari,
Firefox, Explorer, Opera,… Phần đa các trình duyệt di động hay là điện thoại thơng
minh đều có thể hỗ trợ cho loại ngơn ngữ lập trình này.


Hình 2. 1. JavaScript
Nó là một trong những loại ngơn ngữ full-stack duy nhất được tính đến thời
điểm hiện tại với nhiều tính năng nổi bật từ web client đến server, từ desktop đến
mobile …. Dựa trên ý tưởng tạo ra các loại ngơn ngữ thơng dịch tích hợp phù hợp với
mọi trình duyệt để có thể nâng cao được các tính năng tương tác của người dùng đối
với trang web. Thì nhờ vào sự đa năng của mình thì hiện tại, Javascript đã và đang
mang lại nhiều lợi ích cho chính người sử dụng.
- Ứng dụng của JavaScript
Hiện nay, JavaScript được đánh giá cao bởi là trình thơng dịch ngơn ngữ lập
trình chính thức được nhúng bên trong trình duyệt web. Chính vì vậy, lập trình viên có
thể thực hiện được tất cả mọi thao tác mà ngôn ngữ này cho phép như sau:
● Thực hiện khai báo biến
● Tiến hành lưu trữ và truy xuất cho các giá trị
● Có thể xác định các lớp
12


● Thực hiện tải và sử dụng những mô-đun ở bên ngoài.
● Thực hiện xác định và gọi cho các hàm.
● Tiến hành viết trình xử lý cho các sự kiện để có thể đáp ứng với tất cả người
dùng và những sự kiện khác.
● Tiến hành thêm bớt các tính tương tác khác vào cho trang web.
● Thực hiện tạo cho các trị chơi dựa vào trình duyệt web.
● Thực hiện phát triển cho những ứng dụng di động có nhu cầu.
● Hỗ trợ, thực hiện phát triển web
Những một trong những lý do hàng đầu giúp cho JavaScript dần trở thành loại
ngơn ngữ lập trình phổ biến nhất trên thế giới đó là vì:
● Nó có thể cung cấp tích hợp siêu đầy đủ với HTML / CSS.
● Nó có khả năng hỗ trợ được mọi trình duyệt chính và có khả năng được bật dựa

trên mặc định.
Vì sự an toàn của người dùng nên khả năng của JavaScript cũng có một số hạn
chế, như:
● Form client side Javascript không cho phép người dùng đọc và ghi các file, do
nó có tính năng bảo mật.
● JavaScript khơng được sử dụng để kết nối mạng giữa các ứng dụng với nhau
bởi chúng khơng tồn tại những hỗ trợ có sẵn.
● Một điểm bất lợi nữa có thể dễ dàng nhận ra được đó là Javascript khơng có khả
năng đa luồng và đa xử lý nào cả. Tuy nhiên đây vẫn thực sự là ngơn ngữ lập
trình rất đáng để sử dụng.
- JavaScript được sử dụng phổ biến: Hiện nay, Javascipt đã dần được sử dụng
phổ biến với nhiều ứng dụng phổ biến như sau
● Ngôn ngữ server-side: Trước đây, nhiều lập trình viên có thể sử dụng Javascript
làm ngơn ngữ riêng cho server-side. Tuy nhiên, nó lại khơng được biết đến nhiều đến
khi Nodejs ra đời. Dù rằng chỉ xuất hiện chưa được bao lâu nhưng Nodejs đã trở nên
mạnh mẽ, đa năng và mang lại nhiều hiệu quả cao. Nhờ cơ chế bất đồng bộ mà Nodejs
đang dần trở thành sự lựa chọn cho những khách hàng nổi tiếng như: Yahoo,
Facebook, Microsoft,…

13


● Lập trình máy Client: Với các vị trí client-side thì Javascript đang độc chiếm
một vị trí độc tơn. Tính tới thời điểm hiện tại thì khơng có bất kỳ một loại ngơn ngữ
nào có thể cạnh tranh với nó.
● Game: Ngơn ngữ lập trình Scripts đang được sử dụng phổ biến cho các nền
tảng game để xây dựng đồ họa đẹp như mơ. Sự đa nền tảng ở đây thuộc về nền tảng
PC truyền FirefoxOS mới ra đời thì nó có thể sử dụng Javascript là điều bắt buộc mà
chính bạn cần phải phát triển ứng dụng ngay.


● Về ứng dụng desktop: Microsoft có khả năng hỗ trợ phát triển cho mọi ứng
dụng Metro đến từ Window 8 và Javascript đã có thêm nhiều mảnh đất lớn để có thể
dụng võ.
● Các ứng dụng mobile: Việc sử dụng Javascript được dùng để viết ứng dụng
dành riêng cho các thiết bị di động khơng cịn được xem là điều gì quá mới mẻ.

2.2.6. Sản phẩm

14


Hình 2. 2. Phần wireframe của trang web

15



×