Xây dựng ứng dụng luyện thi IELTS cho sinh viên ICTU trên nền tảng android

LỜI CẢM ƠN
Lời đầu tiên em xin chân thành cảm ơn các thầy cô giáo Trường Đại Học
Công Nghệ Thông Tin & Truyền Thông Thái Nguyên đã trang bị cho em những
kiến thức cơ bản cần thiết trong những năm học vừa qua để em có thể hồn thành
Đồ án tốt nghiệp của mình.
Trong suốt thời gian thực hiện Đồ án, em đã nhận được sự giúp đỡ của thầy
cô trong bộ mơn Mạng máy tính và Truyền thơng, Trường Đại Học Công Nghệ
Thông Tin. Vậy cho em xin phép được bày tỏ lời cảm ơn tới các thầy, cô.
Đặc biệt em cũng xin gửi những lời cảm ơn chân thành đến thầy Th.S.
Trần Phạm Thái Kiên, đã tận tình hướng dẫn và chỉ bảo em trong suốt thời gian
thực hiện Đồ án tốt nghiệp này.
Em xin chân thành cảm ơn !
Thái Nguyên, tháng 06 năm 2016
Sinh viên

Chu Văn An

1


LỜI CAM ĐOAN
Nhận thức được Đồ án tốt nghiệp là sản phầm hoàn thiện của sinh viên
CNTT khi ra trường, cần tới sự miệt mài của bản thân và nhất là sự hướng dẫn tận
tình của các thầy cơ giáo, em đã tổng hợp được các kiến thức được học cùng kinh
nghiệm và số liệu khảo sát thực tế nhằm hồn thành Đồ án tốt nghiệp của mình.
Em xin cam đoan: Nội dung Đồ án của em không sao chép nội dung cơ bản
của bất kỳ Đồ án nào và là sản phẩm của chính bản thân em qua nghiên cứu thực tế
xây dựng lên. Mọi thông tin và nội dung sai lệch em xin chịu trách nhiệm hoàn
toàn trước Hội đồng bảo vệ.
Thái Nguyên, tháng 06 năm 2016
Sinh viên

Chu Văn An

2


MỤC LỤC

3


LỜI MỞ ĐẦU
 Lý do chọn đề tài
Ngày nay, thời đại công nghệ thông tin đang đến rất nhanh và có tác động
mạnh mẽ đến tất cả các mặt đời sống xã hội. Công nghệ thông tin là một trong
những động lực quan trọng nhất của sự phát triển, nó cùng với một số ngành công
nghệ cao khác làm biến đổi sâu sắc đời sống kinh tế, văn hóa, xã hội của đất nước.
Do đó, việc ứng dụng cơng nghệ thông tin vào lĩnh vực giáo dục cũng được
Đảng và Nhà nước quan tâm. Cụm từ “ứng dụng công nghệ thông tin vào dạy học”
ngày càng được nhiều người nhắc đến trong các trường phổ thông, cao đẳng và đại
học. Công nghệ thông tin được ứng dụng vào việc thiết kế các “giáo án điện tử” và
xây dựng hệ thống thi cử đang nhận được sự quan tâm của các sở giáo dục và đào
tạo cùng các trường phổ thông, đại học. Tuy nhiên, vẫn cịn khơng ít giáo viên có
những hiểu biết chưa đúng về việc ứng dụng cơng nghệ thông tin để hỗ trợ hoạt
động dạy học và thi. Do đó, hiệu quả của việc ứng dụng cơng nghệ thông tin vào là
chưa cao.
Vậy công nghệ thông tin là gì? Vai trị của nó với dạy học và thi cử như thế
nào? Ứng dụng nó vào dạy học và thi cử ra sao?…Đó là những vần đề có ý nghĩa
khoa học và thực tiễn đang thu hút sự quan tâm của giáo viên hiện nay.
Trên tinh thần đó, nay em thực hiện đề tài “Xây dựng ứng dụng luyện

thi IELTS cho sinh viên ICTU trên nền tảng Android” với mục tiêu ứng
dụng Công nghệ thông tin và mục đích thi kiểm tra năng lực của người học
thơng qua hệ thống Online.
 Mục tiêu nghiên cứu
 Tìm hiểu HTML/CSS và ngơn ngữ lập trình PHP từ đó ứng dụng xây
dựng website quản lý và lưu trữ thông tin người học.
4


 Tìm hiểu về Android và xây dựng ứng dụng thi Online trên thiết bị di động.
 Phạm vi nghiên cứu

5


CHƯƠNG 1. CƠ SỞ LÝ THUYẾT
 Giới thiệu về kỳ thi IELTS

 Kỳ thi IELTS
IELTS viết tắt của chữ International English Language Testing System, là
bài kiểm tra chuẩn hóa năng lực tiếng anh được điều hành bởi tổ chức ESOL của
Đại Học Cambridge, Hội đồng anh (British Council) và tổ chúc giáo duc IDP của
Úc ra đời từ năm 1989. IELTS được các tổ chức giáo dục Mỹ, Anh, Úc, New
Zealand, Singapore, Thụy Điển ...vv và tổ chức chính phủ trên tồn thế giới cơng
nhận, kết quả IELTS được đánh giá để xác định trình độ tiếng anh của 1 người nào
đó. IELTS được các cty Việt Nam ưa chuộng, thu hút sự quan tâm sâu sắc của giới
sinh viên, học sinh. IELTS là bài thi tiếng anh toàn diện và chuyên sâu 4 kĩ năng
nghe nói đọc viết, đa dạng trong câu hỏi và đề thi, chính điều này IELTS được
đánh giá cao. IELTS trên thực tế rất hữu ích cho học viên du học và làm việc tại
nước ngoài. Trước khi luyện thi IELTS, các bạn cần nắm vững cấu trúc bài thi ielts

để có kế hoạch cụ thể và khoa học để học tập hiệu quả.

 Lý do chọn thi IELTS
Bạn sẽ có cơ hội cơng bằng để nỗ lực hết mình. Đó là lý do khơng giống
các kỳ thi khác, IELTS sắp xếp cho bạn một phịng riêng n tĩnh cho q trình thi
Nói để khơng bị mất tập trung và gián đoạn.
IELTS còn nhận ra rằng nhiều người có các phương pháp trả lời câu hỏi
khác nhau. Chẳng hạn, với IELTS bạn có thể trả lời câu hỏi trong bài thi môn Đọc
hay môn Viết theo ý của bạn. Bạn cũng có thể thay đổi các câu trả lời của môn
Đọc trong giờ thi môn Đọc và chỉnh sửa bài làm môn Viết trong giờ thi Viết

 Hình thức thi IELTS
6


Kỳ thi được chia làm 2 phần:
 Phần (a) – thi Viết, bao gồm các kỹ năng: Nghe, Đọc và Viết
 Phần (b) – thi Nói, bao gồm kỹ năng: Nói
Phần thi Viết (Nghe, Đọc, Viết) được tiến hành trong buổi sáng của ngày thi
chính thức và kéo dài khoảng 3 tiếng.
Phần thi Nói chỉ kéo dài 15 phút và mỗi thí sinh sẽ được bố trí thời gian thi
Nói riêng. Lịch thi Nói được bố trí cùng ngày với thi Viết hoặc trong khoảng thời
gian 5 ngày trước và sau ngày thi Viết. Vì 2 địa điểm thi Nói và thi Viết có thể
khác nhau nên thí sinh sẽ được thơng báo chính xác địa điểm của từng phần thi.
 Ngôn ngữ Java Android và nền tảng Android

 Giới thiệu về ngôn ngữ Java
 Lịch sử phát triển
Năm 1990, Sun MicroSystems thực hiện dự án Green nhằm phát triển phần
mềm trong các thiết bị dân dụng. James Gosling, chuyên gia lập trình đã tạo ra một

ngơn ngữ lập trình mới có tên là Oak. Ngơn ngữ này có cú pháp gần giống như
C++ nhưng bỏ qua các tính năng nguy hiểm của C++ như truy cập trực tiếp tài
nguyên hệ thống, con trỏ, định nghĩa chồng các tác tử…
Khi ngôn ngữ Oak trưởng thành, WWW cũng đang vào thời kỳ phát triển
mạnh mẽ, Sun cho rằng đây là một ngơn ngữ thích hợp cho Internet. Năm 1995,
Oak đổi tên thành Java và sau đó đến 1996 Java đã được xem như một chuẩn công
nghiệp cho Internet.


Khả năng của ngôn ngữ Java
Là một ngôn ngữ bậc cao như C, C++, Perl, SmallTalk,.. cho nên có thể

được dùng để tạo ra các ứng dụng để giải quyết các vấn đề về số, xử lý văn bản,
tạo ra trò chơi, và nhiều thứ khác.
Có các mơi trường lập trình đồ họa như Visual Java, Symantec Cafe,
7


Jbuilder, Jcreator, ...
Có khả năng truy cập dữ liệu từ xa thông qua cầu nối JDBC (Java DataBase
Connectivity)
Hỗ trợ các lớp hữu ích, tiện lợi trong lập trình các ứng dụng mạng (Socket)
cũng như truy xuất Web.
Hỗ trợ lập trình phân tán (Remote Method Invocation ) cho phép một ứng
dụng có thể được xử lý phân tán trên các máy tính khác nhau.
Và ln được bổ sung các tính năng cao cấp khác trong các phiên bản sau.
 Những đặc điểm của ngơn ngữ Java
 Ngơn ngữ hồn tồn hướng đối tượng.
 Ngôn ngữ đa nền cho phép một chương trình có thể thực thi trên các hệ
điều hành khác nhau (MS Windows, UNIX, Linux) mà không phải biên dịch lại

chương trình. Phương châm của java là "Viết một lần , Chạy trên nhiều nền"
(Write Once, Run Anywhere).
 Ngôn ngữ đa luồng, cho phép trong một chương trình có thể có nhiều
luồng điều khiển được thực thi song song nhau, rất hữu ích cho các xử lý song
song.
 Ngơn ngữ phân tán, cho phép các đối tượng của một ứng dụng được phân
bố và thực thi trên các máy tính khác nhau.
 Ngôn ngữ động, cho phép mã lệnh của một chương trình được tải từ một
máy tính về máy của người u cầu thực thi chương trình.
 Ngơn ngữ an toàn, tất cả các thao tác truy xuất vào các thiết bị vào ra đều
thực hiện trên máy ảo nhờ đó hạn chế các thao tác nguy hiểm cho máy tính thật.
 Ngơn ngữ đơn giản, dễ học, kiến trúc chương trình đơn giản, trong sáng.

 Lập trình trên thiết bị di động với Android
 Giới thiệu
8


Android là hệ điều hành miễn phí, mã nguồn mở, được phát triển bởi "gã
khổng lồ" Google. Android dựa trên nền tảng Linux, được thiết kế dành cho các
thiết bị di động có màn hình cảm ứng như điện thoại thơng minh và máy tính bảng.
Phiên bản mới nhất của Android có hỗ trợ thêm các thiết bị khác như ô-tô, đồng hồ
thông minh và TV. Ban đầu, Android được phát triển bởi Android Corporation,
với sự hỗ trợ tài chính từ Google và sau này được chính Google mua lại vào năm
2005. Android ra mắt vào năm 2007 cùng với tuyên bố thành lập Liên minh thiết bị
cầm tay mở (Open Handset Alliance - một
hiệp hội gồm các công ty phần cứng, phần mềm, và viễn thông với mục tiêu đẩy
mạnh các tiêu chuẩn mở cho các thiết bị di động. Chiếc điện thoại đầu tiên chạy
Android được bán vào tháng 10 năm 2008.


Nền tảng của Android
Android có mã nguồn mở và Google đã phát hành mã nguồn theo Giấy

phép Apache. Chính mã nguồn mở cùng với một giấy phép khơng có nhiều ràng
buộc đã cho phép các nhà phát triển thiết bị, mạng di động và các lập trình viên
nhiệt huyết được tùy biến và phân phối Android một cách tự do. Ngồi ra, Android
cịn có một cộng đồng lập trình viên đơng đảo, chun viết các ứng dụng để mở
rộng chức năng của thiết bị bằng ngôn ngữ lập trình Java có sửa đổi. Vào tháng 7
năm 2013, có hơn một triệu ứng dụng cho thiết bị Android được công bố, và số
lượt tải ứng dụng từ Google Play, cửa hàng ứng dụng chính của Android, ước tính
đạt khoảng 50 tỷ. Một cuộc khảo sát các nhà phát triển vào tháng 4 - 5 năm 2013
cho thấy hơn 71% lập trình viên cho di động đã phát triển ứng dụng cho Android.
Tại sự kiện Google I/O 2014, "gã khổng lồ" cơng bố đã có hơn một tỉ người dùng
Android hàng tháng, trong khi con số này vào tháng 6 năm 2013 mới chỉ là 538
triệu.
Những yếu tố trên đã giúp Android trở thành nền tảng điện thoại thông
minh phổ biến nhất thế giới, vượt qua Symbian vào quý 4 năm 2010 (chiếm 33%),

9


và được các công ty công nghệ lựa chọn khi họ cần một hệ điều hành khơng nặng
nề, có khả năng tinh chỉnh, giá rẻ để chạy trên các thiết bị cơng nghệ cao thay vì
xây dựng từ đầu. Kết quả là mặc dù được thiết kế để chạy trên điện thoại và máy
tính bảng, Android đã xuất hiện trên TV, máy chơi game, đồng hồ thông minh, ôtô và các thiết bị điện tử khác. Bản chất mở của Android cũng khích lệ một đội ngũ
đơng đảo lập trình viên và những người đam mê sử dụng mã nguồn mở tạo ra
những dự án do cộng đồng quản lý. Những dự án này bổ sung các tính năng cao
cấp cho những người dùng thích tìm tịi hoặc đưa Android vào các thiết bị ban đầu
chạy hệ điều hành khác.

Android chiếm 75% thị phần điện thoại thơng minh trên tồn thế giới vào
thời điểm quý 3 năm 2012, với tổng cộng 750 triệu thiết bị đã được kích hoạt. Vào
tháng 4 năm 2013 đã có 1,5 triệu lượt kích hoạt mỗi ngày và tổng số thiết bị
Android được kích hoạt lên đến 1 tỷ vào tháng 9 năm 2013. Sự thành cơng của hệ
điều hành này cũng khiến nó trở thành mục tiêu trong các vụ kiện liên quan đến
bằng phát minh, góp mặt trong cái gọi là "cuộc chiến điện thoại thông minh" giữa
các công ty công nghệ.
 Giới thiệu HTML/CSS

 Giới thiệu về HTML
 Khái niệm
HTML là chữ viết tắt của HyperText Markup Language, có nghĩa là ngơn
ngữ đánh dấu siêu văn bản. Nó dùng để định dạng bố cục, các thuộc tính liên quan
đến cách hiển thị của một đoạn text và được hiển thị trên một chương trình đặc
biệc ta gọi là Browser. Hiện nay có khá nhiều Browser như Firefox, Chrome, Cốc
Cốc, ...Tất cả Browser đều có điểm chung là giúp người dùng thao tác với website
và nó đều có khả năng biên dịch những đoạn mã HTML, CSS và Javascript.
HTML là một định dạng đặc biệc của XML nên nó sẽ có thẻ mở và thẻ

10


đóng với cú pháp như sau:
<tagname></tagname>

Ngồi ra mỗi thẻ HTML cịn có một số thuộc tính riêng và danh sách các
thuộc tính sẽ nằm bên trong thẻ mở như sau:
<tagname prop1=”value1” prop2”value2”></tagname>

 Bố cục HTML của một trang web

Như trên mình có giới thiệu HTML dùng để tạo nên bổ cục của giao diện
website. Nó có rất nhiều thẻ khác nhau và mỗi thẻ sẽ có những nhiệm vụ nhất định.
Vậy bạn có thắc mắc mắc cách chia các thẻ cho một trang web như thế nào không?
Thông thường bổ cục HTML của một website sẽ có dạng như sau:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

My First Heading

My first paragraph.

</body>
</html>

Trong đó:
 <!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị là html để
trình duyệt (Browser) biết.
 <html> và </html> là cặp thẻ nằm ngồi cùng và nó có nhiệm vụ là bao
hết nội dung của trang web lại. Thẻ này là bát buộc.
 <head> và </head> là phần khai báo thông tin của trang web
 <title> và </title> nằm bên trong thẻ <head> và đây chính là khai báo
tiêu đề cho trang web.
 <body> và </body> là thành phần quan trọng nhất, nó chứa nhưng đoạn

11


mã HTML dùng để hiển thị trên website.
Các thẻ còn lại nằm trong thẻ <body> chính là các thẻ định dạng dữ liệu.

Như vậy trong một website chúng ta chia làm 2 phần chính:
 Phần 1: Là nhũng khai báo thơng tin cho trang web và ta đặt nó trong
thẻ head.
 Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt
trong thẻ body.
Và được diễn tả như hình sau:
<html>
<head>
<title>Page Title</title>
</head>
<body>

My First Heading

My first paragraph.

</body>
</html>

 Các vị trí thường thấy trong giao diện website
Thơng thường giao diện của một trang web sẽ được chia thành các phần như sau:
 Header (cố định)
 Footer (cố định)
 Menu (cố định)
 Sidebar (cố định)
 Main Content (Mỗi trang khác nhau)
Như vậy trong các phần đó thì chỉ có phần content là sẽ thay đổi ở mỗi
trang khác nhau, các phần cịn lại thì sẽ khơng thay đổi.

 Giới thiệu về CSS
 Khái niệm
12

CSS là viết tắt của cụm từ “Cascading Style Sheet” , nó là một ngơn ngữ
quy định cách trình bày của các thẻ HTML trên trang Web. CSS quy định cách
hiển thị nội dung của các thẻ HTML trên các trình duyệt gần như giống nhau,bằng
cách quy định các thuộc tính cho thẻ HTML đó.
Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ
như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh, ...
Về cơ bản, các trang HTML như bộ xương – khuôn khổ cơ bản – của một
trang web – trong khi các file CSS sẽ cụ thể hóa các thành phần của một trang nên
được hiển thị như thế nào. CSS cho phép bạn kiểm sốt phơng chữ, màu chữ, kiểu
nền…, của một trang HTML.
CSS làm cho việc thiết kế và xây dựng một trang Web trở nên dễ dàng
hơn.Trước khi có CSS, bạn phải sử dụng HTML để thực hiện tất cả các tiêu đề
cũng như các thành phần của một trang Web.Mặc dù đã có một số cách khác
nhưng HTML vẫn thường xuyên được sử dụng và các nhà thiết kế Web sẽ phải
thay đổi từng thành phần riêng lẻ trên mỗi trang. CSS đã giúp cho việc thay đổi
phong cách của một trang Web đơn giản hơn và đỡ tốn thời gian hơn, bạn có thể
thực hiện sự thay đổi trên một mục nào đó và sau đó apply sự thay đổi này trên
tồn bộ trang Web thay vì phải thực hiện trên từng mục riêng lẻ như trước đây.


Ứng dụng của CSS
CSS có thể tùy chỉnh bố cục định dạng hiển thị nội dung,màu sắc căn

chỉnh màu nền,đường viền,đổ bóng… cho các thẻ html.Nếu 1 website mà chỉ
làm bằng html khơng sử dụng css thì website đó nhìn sẽ rất thơ xơ.Bạn có thể
tưởng tượng nó như 1 chiếc xe máy mà bỏ hết lớp sơn và áo bên ngồi chỉ
cịn lại mỗi bộ khung và máy.
CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối
tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả

Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt khác nhau
13




Cú pháp của CSS
Cú pháp của css bao gồm 3 phần chính: đối tượng chọn, tên thuộc tính, giá

trị thuộc tính.
selector{
- Thuộc tính 1
- Thuộc tính 2
- Thuộc tính 3
.....................
- Thuộc tính n
}
Trong đó :
- Selector là đối tượng lựa chọn, có thể là thẻ html hoặc là các class và id
- Thuộc tính css là các thuộc tính quy định cho thẻ html, ví dụ như width
quy định chiều dài, height quy định chiều cao cho thẻ html... chúng ta có rât nhiều
các thuộc tính này.


Cách nhúng CSS vào html
Có 3 cách nhúng css vào thẻ html như sau :
Cách 1. Chèn vào phần head của website, cụ thể là trong cặp thẻ <head>

</head>

14


<head>
<style type=”text/css”>
selector{
- Thuộc tính 1
- Thuộc tính 2
- Thuộc tính 3
.....................
- Thuộc tính n
}
</style>
</head>

Cách 2. Nhúng css vào một file css riêng sau đó nhúng vào website
 Cú pháp:
 <link href=”Đường dẫn đến file css” rel =”stylesheet” type=”text/css”/>
Ví dụ: <link href="styles/style.css" rel="stylesheet" type="text/css" />
Cách 3. Chèn trực tiếp vào thẻ html
Ví dụ :

Đây là thẻ P,có màu đỏ và chữ gạch chân

15


- Các thuộc tính cách nhau bằng dấu chấm phảy ( ; ) như cách viết bình thường

 Giới thiệu về kỹ thuật Responsive

 Khái niệm
Responsive là một công nghệ dùng cho ngành thiết kế website, sử dụng để
website phù hợp trên tất cả các kích thước màn hình từ một cơ sở dữ liệu và một
layout gốc.Trước đây người thiết kế phải thiết kế 2 bản riêng biệt một cho màn
hình máy tính và một cho màn hình thiết bị di động. Sự ra đời của Responsive là
giải pháp tuyệt vời của vấn đề này, vẫn chỉ một bản thiết kế, người dùng có thể
truy cập trên các thiết bị kích thước khác nhau với cùng địa chỉ URL, giao diện
hiển thị vẫn giữ nguyên.
Trong ngành thiết kế responsive architecture khơng phải là khái niệm xa lạ,
bạn có bao giờ để ý đến những cánh cửa tự động đóng mở, nó sẽ tự động mở ra
một khoảng khơng gian vừa đủ cho một người hoặc nhóm người bước vào. Một hệ
thống điều chỉnh điều hòa và ánh sáng tự động điều tiết nhiệt độ và ánh sáng tùy
theo số lượng người đang có trong phịng…
Responsive web design khơng phải là ý tưởng hồn tồn mới, nó kế thừa và
tương tự như responsive architecture, trang web khi được thiết kế phải có khả năng
tự động điều chỉnh để thích nghi với nhiều nhóm người sử dụng khác nhau.

16


Hình 1.1 Cơng nghệ Responsive
Hiển nhiên một điều chúng ta không thể dùng một cảm biến hoặc một chip
thông minh như cách mà người ta làm khi xây dựng cửa tự động hay hệ thống nhà
thông minh. Chúng ta phải nhìn nhận nó một cách khá trừu tượng. Hiện tại, một
vài ý tượng đã được sử dụng: fluid layout, media queries và script có thể định dạng
lại trang web và mark-up khá tốt.
Bạn cũng nên nhớ rằng responsive web design khơng chỉ là việc tùy chỉnh
cho phù hợp với kích thước màn hình và resize lại hình ảnh, nó mở ra một cách
nghĩ hoàn toàn mới về thiết kế. Chúng ta sẽ lượt qua những ý tưởng đã được sử
dụng và những ý tưởng đang còn nằm trên bàn giấy.



Độ phân giải màn hình
Càng nhiều thiết bị, càng nhiều độ phân giải khác nhau, sự phổ biến của

những thiết bị như iPhone, iPad và các smartphone có thể chuyển từ dạng xem
ngang và đứng một cách nhanh chóng.

17


Hình 1.2 Kích thước màn hình
Thêm nữa khi thiết kế cho cả màn hình nằm ngang và màn hình đứng,
chúng ta phải tính đến hàng trăm kích thước màn hình khác nhau. Ta có thể nhóm
một số kích thước lại với nhau và thiết kế cho từng nhóm một, và thiết kế riêng
cho từng nhóm này nếu cần thiết. Bên cạnh đó bạn cũng phải biết rằng khá nhiều
người dùng khơng bao giờ maximize trình duyệt của mình.

18


Hình 1.3 Các loại kích thước màn hình


Flexible layout Flexible layout
Một vài năm trước, khi flexible layout còn là thứ gì đó xa xỉ đối với

website. Thứ duy nhất flexible trong thiết kế là số lượng cột và text. Ảnh có thể dễ
dàng làm “vỡ” cấu trúc website. Việc thiết kế trên một khoảng kích thước tính
bằng pixel khiến người thiết kế lúng túng khi trang web chuyển giữa các kích

thước khung hình khác nhau.
Hình ảnh cần phải được tự động điều chỉnh và không được phép làm vỡ cấu
trúc website, vì ta khơng làm một sản phẩm in ấn. Khi kích thước ảnh khơng bị fix
ở một giá trị nào đó, nó mang lại nhiều lợi ích hơn mong đợi, ý tưởng tuyệt vời cho
những những thiết bị có thể xoay ngang và đứng.

19


Hình 1.4 Flexible layout Flexible layout


Filament Group’s Responsive Images
Kỹ thuật này được giới thiệu bới Filement Group, theo đó thay vì resize lại

hình ảnh, sẽ load hẳn một ảnh khác khi cần, cách này có thể tiết kiệm được việc
load ảnh lớn ko cần thiết với các thiết bị nhỏ.

20


Hình 1.5 Kỹ thuật resize hình ảnh


Media Queries
CSS3 vẫn hổ trợ đầy đủ media type từ CSS2.1 như screen, print, handheld,

và đã bổ sung khá nhiều khai báo mới như max-width, device-width, orientation,
color. May mắn thay những thiết bị chạy android, ipad đều khơng sử dụng trình
duyệt IE!!! nên bạn an tâm khi sử dụng những thuộc tính CSS 3.



Ẩn hoặc hiển thị nội dung
Rõ ràng việc chỉ hiển thị những nội dung thật sự cần thiết trên những thiết

bị có kích thước nhỏ là cần thiết, kinh nghiệm cho thấy trên các thiết bị di động
21


bạn chỉ nên có một thanh navigation đơn giản, nhấn mạnh nội dung, xem dạng list
niều dòng tốt hơn là chia thành nhiều cột

Hình 1.6 Hiển thị nội dung

 Làm thế nào để áp dụng Responsive lên giao diện website
Để cho website trở thành Responsive, chúng ta có hai bước như sau:
Bước 1. Khai báo meta viewport
22


Trước tiên bạn cần đặt thẻ này vào cặp <head> trên trong mã HTML của
website.
<html>
<head>
<meta name=”viewport” content=”width=device-width, initialscale=1”>
</head>
</html>

Meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng
với kích thước màn hình.Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập

trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng
của thiết bị (device-width) và khơng cho phép người dùng phóng to (thiết lập
initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyến khích bạn sử dụng
cho tồn bộ các dự án Responsive.
Ngồi ra thẻ meta viewport này cịn có các giá trị như:
 width: thiết lập chiều rộng của viewport.
 device-width: Chiều rộng cố định của thiết bị.
 height: thiết lập chiều cao của viewport.
 device-height: Chiều cao cố định của thiết bị.
 initial-scale: Thiết lập mức phóng to lúc ban đầu, giá trị là 1 nghĩa là
khơng phóng to, và khi giá trị được thiết lập thì người dùng khơng thể
phóng to vì nó đã được cố định.
 minimum-scale: Mức phóng to tối thiểu của thiết bị với trình duyệt.
 maximum-scale: Mức phóng to tối đa của thiết bị với trình duyệt.
 user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no.

23


Tại sao lại sử dụng meta viewport? Ta có ví dụ của một nội dung có meta
viewport và khơng có meta viewport như sau:

Hình 1.7 Khi chưa có meta viewport

24


Hình 1.8 Khi website có meta viewport
Bước 2. Viết CSS cho chiều rộng của thiết bị
Ngay tại bước này, chúng ta sẽ tiến hành viết CSS tương ứng cho từng mức

chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều
rộng và được tính trên đơn vị là pixel. Ngồi ra có thể tính dựa trên đơn vị là em,
rem, DPI, phần trăm,…
Để viết CSS tương ứng cho chiều rộng của trình duyệt, chúng ta sẽ sử dụng
thẻ truy vấn @media trong CSS3 (@media query) như sau:
body {
background: #fff;
25