LỜI CẢM ƠN

Em xin chân thành cảm ơn thầy Phạm Văn Hà là giáo viên hướng
dẫn trong đề tài mà em thực hiện, em rất trân trọng sự giúp đỡ nhiệt tình
của thầy trong quá trình học tập cũng như quá trình làm báo cáo thực tập
tốt nghiệp và đồ án tốt nghiệp để em có thể hoàn thành tốt đồ án này.
Em cũng xin cảm ơn khoa Công Nghệ Thông Tin đã tạo điều kiện tốt
nhất để em có được rất nhiều kiến thức bổ ích để nhanh chóng làm quen
với công việc cũng như áp dụng trong các sản phẩm của mình. Khoa Công
Nghệ Thông Tin đã cho em cơ hội tham gia các chương trình kết nối với
doanh nghiệp cực kì bổ ích và thực tế, giúp chúng em được đi ra các doanh
nghiệp và tham gia vào các dự án thực tế để chúng em tiếp thu được rất
nhiều các kiến thức và kĩ năng mới cực kì hữu ích cho bản thân và công
việc trong tương lai. Các thầy, cô trong khoa đã ân cần dạy dỗ, hết sức tạo
điều kiện cho chúng em trong suốt quá trình học tập và rèn luyện tại trường.
Từng giờ lên lớp, từng buổi ngoại khóa mà nhà trường tổ chức đều mong
muốn chúng em có thật nhiều kiến thức, thật nhiều kĩ năng để chúng em
cứng cáp hơn, tự tin hơn, mở rộng khả năng và tìm kiếm cho bản thân
những cơ hội thực sự phù hợp. Em chẳng biết nói gì hơn ngoài việc gửi lời
cảm ơn chân thành nhất tới tất cả các thầy cô, mong các thầy, các cô luôn
giữ gìn sức khỏe để tiếp tục dìu dắt các thế hệ học sinh trở thành những
con người tài năng và có ích cho xã hội.
Và cuối cùng, em cũng xin cảm ơn trường Đại học Công nghiệp Hà
Nội là ngôi trường tuyệt đẹp và tốt nhất mà em đã tin tưởng theo học. Xin
cảm ơn trường vì những đóng góp đã giúp em có được kiến thức không chỉ
về mặc học vấn mà còn những kiến thức về xã hội để giúp em có thể vững
bước trên con đường của chính mình.

1



khối lượng kiến thức cần truyền đạt cũng như tiếp thu trong mỗi tiết
học, vừa tạo điều kiện cho thế hệ trẻ sớm được tiếp cận với công nghệ
để nhanh chóng phát triển khả năng tư duy cũng như trí óc sáng tạo
cho mỗi thế hệ học sinh.

2


Mục lục:

3


DANH SÁCH CÁC HÌNH VẼ SỬ DỤNG TRONG BÁO CÁO
Hình 3.4: Sản phẩm hoàn chỉnh của bài thực hành 1.
Hình 3.5: Thiết kế giao diện bài thực hành 2.
Hình 3.6: Sản phẩm hoàn chỉnh bài thực hành 2..
Hình 3.7: Thiết kế giao diện bài thực hành 3.
Hình 3.8: Sản phẩm hoàn chỉnh bài thực hành 3.
Hình 3.9: Giao diện bài thực hành 4.1.
Hình 3.10: Giao diện bài thực hành 4.2.
Hình 3.11: Giao diện bài thực hành 5.
Hình 3.12: Giao diện bài thực hành 6.
Hình 3.13: Giao diện bài thực hành 7.

DANH SÁCH CÁC BẢNG BIỂU SỬ DỤNG TRONG BÁO CÁO
Bảng 1.1: Các hàm cơ bản trong Jquery....................................................................27
Bảng 1.2: Các trạng thái của sự kiện drap and drop..................................................32

I. PHẦN MỞ ĐẦU

vận dụng được nhiều kiến thức mình học được và mang yếu tố cá nhân
bên trong sản phẩm đó.
Từ những lý do trên, sau một thời gian nghiên cứu tìm hiểu cộng với
sự gợi mở hướng dẫn của thầy Phạm Văn Hà trực tiếp hướng dẫn thực
tập tốt nghiệp. Nên em đã quyết định tìm hiểu và phát triển một trang
web với một vài bài thực hành demo để vận dụng tất cả những kiến thức
em học hỏi được nhằm tạo ra một sản phẩm có ích và nắm được công
nghệ để phát triển và hoàn thiện sản phẩm của mình trong tương lai.

2. Mục tiêu và nhiệm vụ nghiên cứu.
2.1 Mục tiêu.
Tìm hiểu những kiến thức thực tế, những công nghệ mới đã và đang
được sử dụng tại các doanh nghiệp để biết được nhu cầu thực tế của xã
hội và các xu thế tương lai của công nghệ.
Nghiên cứu, thiết kế và xây dựng website trực tuyến hỗ trợ việc dạy
và học các bài thực hành / thí nghiệm các môn khoa học phổ thông như
vật lý, sinh học, địa lý trong nội dung chương trình trung học phổ thông
dựa trên mô phỏng và tương tác ảo.s
2.2 Nhiệm vụ nghiên cứu.
• Nghiên cứu cơ sở lý thuyết về HTML5 sử dụng SVG, CSS3,
Jquery.
5


• Nghiên cứu và tìm hiểu về sử dụng công cụ Adobe Photoshop,
Adobe Illustrator để tạo ra SVG.
• Nghiên cứu tìm hiểu về cơ sở lý thuyết các bài thí nghiệm, các
công thức tính toán.
• Thiết kế giao diện theo các bài thí nghiệm sao cho hợp lý và thuận
tiện.

• Pin quang điện và ứng dụng của pin quang điện.
6


• Tác động có hướng của dòng điện một chiều – quy tắc bàn tay
trái.
• Hệ tuần hoàn.
• Cấu tạo và chu kì hoạt động của tim.
• Cấu tạo và hoạt động của cơ và xương.

5. Phương pháp nghiên cứu
• Tìm hiểu sách giáo khoa và tài liệu của nhà xuất bản giáo dục.
• Tìm hiểu tại các diễn đàn về Công Nghệ Thông Tin, các forum về
lập trình web, lập trình Jquery, thiết kế sử dụng Adobe Illustrator.
• Tìm hiểu tại các diễn đàn về vật lý, hóa học, địa lý .v.v..
• Học cách thiết kế các đối tượng, demo các vật thể đơn giản.
• Tìm hiểu các thư viện mẫu, các plug–in hỗ trợ lập trình, thiết kế.
• Tìm hiểu, tham khảo ý kiến của các anh chị, các bạn bè có kiến
thức sâu và am hiểu về lĩnh vực mình đang nghiên cứu.
• Tham khảo các dữ liệu tại kho tài liệu và từ điển tra cứu của
doanh nghiệp.

7


II. PHẦN NỘI DUNG
CHƯƠNG I: CƠ SỞ LÝ THUYẾT
HTML5 & CSS3 là công nghệ mới nhất được giới thiệu vào năm 2009
và chỉ trong vòng 2 năm chúng đã trở thành một cơn bão quét ngang
qua làng công nghệ website mặc dù nó còn thiếu một vài tags nhưng

8


kiếm đơn giản, tương tác nhiều hơn và tốt hơn. Trang web sẽ đơn giản
hơn trong thiết kế và code. Ngôn ngữ HTML đầu tiên áp dụng cho web
vào năm 2008 và được phát triển bởi tập đoàn mạng toàn cầu(World
Wide Web Consortium).
Vậy có gì mới trong HTML5?
Nếu so sánh giữa bề mặt thì HTML4 và HTML5 thì rất khó để nhận
biết html4 và html5 chỉ đến khi vào code bạn mới biết. Đặc biệt các nhà
phát triển trình duyệt rất thích các thông số kĩ thuật mới của html5 để
render mặc định của trình duyệt.
HTML5 được cung cấp miễn phí cho cả developers lẫn người dùng,
không như flash, flash player thì miễn phí nhưng bộ phát triển lại có giá
rất cao. Không phải ai cũng có thể sử dụng được.
HTML5 sẽ có lợi thế hơn về tính phổ biến khi bước vào môi trường di
động. Ví dụ: Flash là plug-in còn HTML5 thì được trực tiếp render từ
browser nên chắc chắn tính phổ biến sẽ cao hơn rất nhiều.
- HTML 5 đơn giản hơn. Ví dụ : nếu bạn vẫn bực mình về DOCTYPE
thì nay chuyện đó chỉ còn là dĩ vãng.
DOCTYPE của XHTML Strict 1.0 là :

•
•
•

Header: Chứa tiều đề hoặc phụ đề trang.
Navigation: Phần chuyển hướng trang (chứa các thẻ link).
Article và Section: Dùng tạo nhóm (Hiển thị tin tức).
Aside: Tạo nội dung bổ sung.
Footer: Chứa thông tin trang, bài viết, hoặc một phần website,
…
10


Chi tiết:
<!doctype html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<header>
Page title
</header>
<nav>
<!-- Navigation -->
</nav>
<section id="intro">
<!-- Introduction -->
</section>
<section>

không sợ hiện tượng vỡ hạt như các định dạng hình ảnh thông thường
khác. Và vì ưu điểm của nó, nên nó đã có thể được đưa vào web. Tất
nhiên, SVG đã được hỗ trợ trong HTML5.

Hình 1.2: Sử dụng Adobe Illustrator để thiết kế giao diện SVG
Các ưu điểm của SVG:
Ưu điểm của việc sử dụng SVG thay vì các định dạng hình ảnh khác
như (JPG hay PNG):
• SVG có thể được tạo hoặc chỉnh sửa bằng bất kì trình soạn thảo
text đơn giản nào.
• SVG có thể được tìm kiếm, đánh dấu, nén và dùng script.
12


•
•
•
•

SVG có khả năng mở rộng.
SVG có thể in được với mọi chất lượng và mọi độ phân giải.
SVG có thể phóng to nhưng không vỡ ảnh.
SVG hầu như được hỗ trợ trên tất cả các trình duyệt như Firefox,
Chrome, Internet Explorer, Safari….
• Các hình ảnh SVG không bị giảm chất lượng khi chúng bị phóng
to hay thay đổi kích thước.
• SVG có dung lượng nhỏ hơn các file ảnh định dạng JPG và GIF.
• Văn bản bên trong hình ảnh SVG có thể được tương tác bằng
chuột hoặc có thể tìm kếm trên các công cụ tìm kiếm.
-



Trong đó:
 points: Chỉ định giá trị x(ngang) và y(dọc) của mỗi điểm. Một
hình đa giác cần ít nhất 3 điểm hoặc nhiều hơn.
• Tạo đường gấp khúc

• Chèn văn bản
<text x="0" y="15" fill="#f00" >Some text</text>
Trong đó:
 x, y: Là giá trị tọa độ bắt đầu viết text.
Kết luận: HTML5-SVG là một bức tranh phức tạp có thể tạo ra được
bằng cách sắp xếp thật tỉ mỉ từng thành phần đơn giản, độc lập và được
định nghĩa sẵn bằng các mã và thẻ. Hoặc đơn giản hơn, chúng ta có thể
sử dụng bộ công cụ của Adobe Illustartor để thỏa sức sáng tạo và chỉnh
14


sửa nội dung của website, sau đó suất ra định dạng SVG rồi nhúng trực

Trong ví dụ trên là định nghĩa cho các thẻ trong HTML.
Điều đó có nghĩa là tất cả các thẻ trong tài liệu HTML sẽ
được chuyển sang màu xanh đậm (nany).
 Id: được sử dụng để đặt tên cho một định dạng cụ thể nào đó
sẽ được dùng trong html. Thông thường những thành phần
định dạng id này được dùng cho một đối tượng hoặc một nhóm
đối tượng cụ thể trong trang HTML.
Định nghĩa id trong CSS:
#main{
padding: 0;

15


}

position: relative;
margin: 0 auto;
width: 100%;

Sử dụng id trong HTML:
<div id = main>
<label for="username">User Name:</label>
<input type= "textbox" name= "username" value= "">
</input>
</div>

 Class: được định nghĩa cho những khối định dạng chung được
sử dụng nhiều lần ở nhiều nơi.
Định nghĩa class trong CSS:

#main{
padding: 0;
position: relative;
margin: 0 auto;
width: 100%;
}

1.3.2: Cách sử dụng CSS để định dạng cho trang Web
Ở trên chúng ta đã tìm hiểu cơ bản về cách viết CSS, bây giờ chúng
ta sẽ tìm hiểu cách sử dụng chúng để định nghĩa vào trang HTML. Có 03
cách sử dụng CSS vào trang HTML.
 Viết trực tiếp vào thẻ HTML
<div id = copyright>

16

Copyright by Nguyen Hai Nam

</div>

Cách này thường được sử dụng khi chúng ta cần định nghĩa cho một
vài thẻ riêng lẻ trong trang HTML.
 Định nghĩa Style cùng với trang HTML
Viết trực tiếp đoạn CSS vào trang HTML tại phần thẻ <head></head>
sau đó ở bên dưới chúng ta sử dụng như bình thường.
Cách này được sử dụng khi bạn xây dựng Style cho từng trang riêng
lẻ:
<head>
<style>
h1{


 Viết Style ra một trang riêng.
Theo cách này bạn viết style ra một trang riêng và lưu dưới file .css.
Ví dụ viết đoạn css sau và lưu dưới tên file login.css.
h1{
color: navy;
}
#main{
width:300px;
padding: 1em;
}
#copyright {
font-size:75%;
text-align: right;
}
.main_color{
color:blue;
}

Sau đó chúng ta khai báo sử dụng Css trong phần head của file html
như sau:
<head>
<link rel="stylesheet" href="login.css">
</head>
<bodỵ>
Login form
<div id = "main">
<label for="username">User Name: </label>
<input type="textbox" name="username" value=""></input>
</div>

- CSS3 User Interface
Trong phạm vi đề tài không nghiên cứu quá sâu về css3, nên việc tìm
hiểu css3 chỉ dừng lại ở đây, đảm bảo đáp ứng đủ nhu cầu sử dụng css
để định dạng đơn giản một website.
1.4: Giới thiệu Jquery
JQuery là một thư viện được xây dựng dựa trên ngôn ngữ Javascript,
do đó bạn có thể sử dụng tất cả các phương thức, thuộc tính cũng như
các tiện ích mà Javascript hỗ trợ (string, number, array, object,
function…). JQuery được tích hợp nhiều module khác nhau từ module
hiệu ứng cho đến module truy vấn selector. JQuery được sử dụng đến
99% trên tổng số website trên thế giới.
Có một câu slogan của JQuery được gắn ở bất kỳ đâu là “write less,
do more” , hiểu đơn giản chính là viết mã ít mà hiệu quả đạt được lại tối
đa. Điều này đúng so với JQuery cũng như các thư viện khác của
javascirpt. Chính vì lẽ đó mà các JQuery selector được xây dựng theo
hướng đơn giản và dễ dùng.

19


Do các chức năng của website chủ yếu được viết bằng JQuery nên
chúng ta tập chung nghiên cứu và tìm hiểu rõ về JQuery để hiểu cách
xây dựng và vận hành website.
1.4.1: Các đối tượng cơ bản của Jquery.
 Đối tượng String.
Một chuỗi trong JQuery là một đối tượng không đổi chứa 0, 1 hoặc
nhiều ký tự. Sau đây là một ví dụ hợp lệ về một String trong JQuery:
"This is JQuery String"
'This is JQuery String'
'This is "really" a JQuery String'


// false

"hello" // true

 Đối tượng Object.
Jquery hỗ trợ tốt khái niệm Object. Chúng ta có thể tạo một object
như sau:
var emp = {
name: "Zara",
age: 10

20


};

Và chúng ta có thể trực tiếp truy vấn như sau:
// Getting object properties
emp.name

// ==> Zara

emp.age

// ==> 10

 Đối tượng Array.
Chúng ta có thể định nghĩa các mảng như sau:
var x = [];

Date.
Bảng dưới liệt kê các hàm JQuery quan trọng:
21


Bảng 1.1: Các hàm cơ bản trong Jquery
STT Phương thức & Miêu tả
1

charAt()
Trả về ký tự tại chỉ mục (index) đã cho.

2

concat()
Kết nối hai chuỗi văn bản và trả về một chuỗi mới.

3

forEach()
Gọi một hàm cho mỗi phần tử của một mảng.

4

indexOf()
Trả về chỉ mục về sự xuất hiện đầu tiên bên trong việc gọi đối
tượng String với giá trị đã cho, hoặc -1 nếu không tìm thấy.

5



11

toLowerCase()
Trả về giá trị chuỗi đang gọi được biến đổi thành kiểu chữ thường.

12

toString()
Trả về sự biểu diễn chuỗi của giá trị số.

13

toUpperCase()
22


Trả về giá trị chuỗi đang gọi được biến đổi thành chữ hoa.
Như vậy, chúng ta đã nắm được các thành phần cơ bản thường
xuyên được sử dụng trong jQuery.
1.4.2: Các JQuery Selector đơn giản.
JQuery selector là một thành phần quan trọng trong thư viện jquery.
Selector có thể được sử dụng để chọn một hoặc nhiều thành phần html.
Thành phần HTML nào được chọn thì chúng ta có thể thực hiện các thao
tác jquery lên nó. JQuery selector lựa chọn các thành phần html dựa trên
tên, id, class, attribute,…của chúng. Tất cả các JQuery selector bắt đầu với
ký hiệu $().
 Sử dụng JQuery Selector theo tên thẻ HTML:
$(“p”): Chọn tất cả các thẻ p.
$(“a”): Chọn tất cả các thẻ a.

$(“.myclass”): Chọn thẻ có class = myclass
Ví dụ:
<script>
$(document).ready(function(){
$("button").click(function(){
$(".myclass").hide();
});
});
</script>

Đoạn code trên để thực hiện khi nhấn nút button thì thẻ có class =
myclass sẽ bị ẩn đi.
 Các lựa chọn khác:
$(“*”): Chọn tất cả
$(this): Chọn thẻ HTML hiện tại
$(“p#myid”): Chọn tất cả thẻ p có id = myid
$(“p.myclass”): Chọn tất cả thẻ p có class = myclass
$(“[href]”): Chọn tất cả các thẻ có thuộc tính href
$(“ul li:first”): Chọn thẻ li đầu tiên trong thẻ ul
$(“ul li:first-child”): Chọn thẻ li đầu tiên của mỗi thẻ ul
$(“ul li:last-child”): Chọn thẻ li cuối cùng của mỗi thẻ ul
$(“ul li:nth-child(2) “): Chọn thẻ li thứ 2 của mỗi thẻ ul
$(“:button”): Chọn tất cả thẻ button và thẻ input có type =
button
$(“tr:even”): Chọn tất cả thẻ tr ở vị trí chẵn
$(“tr:odd”): Chọn tất cả thẻ tr ở vị trí lẻ.
24


1.4.3: Các sự kiện trong jQuery.

</script>

Khi đưa chuột đi qua vùng đối tượng có id = demo thì xuất hiện hộp
thoại thông báo trên.
• Focus
Sự kiện focus thường sử dụng với các thành phần trong form
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
});
</script>

Khi focus chuột vào thẻ input thì thẻ input sẽ đổi màu.
Ngoài những sự kiện trên thì còn rất nhiều sự kiện click khác trong
jquery mà chúng ta sẽ gặp trong quá trình làm việc như mouse up,
25

---