BÁO cáo đồ án cơ sở banner

MỞ ĐẦU

Hiện nay, có rất nhiều phần mềm giúp tạo ra một banner đẹp và mang
phong cách riêng.Có 2 cách lựa chọn là dùng Flash banner hoặc là HTML5,
với nhu cầu quảng cáo. Sự ra đời của Internet kéo theo xuất hiện hình
thức quảng cáo trực tuyến. Chính nhờ khả năng tương tác và định hướng
cao,quảng cáo trực tuyến đã dần chiếm được thị phần đáng kể trên thị trường và
đang lấn sân các loại hình quảng cáo truyền thống như truyền hình và báo in.
Doanh thu quảng cáo trực tuyến tại Việt Nam năm 2009 đạt 278 tỷ đồng, tương
đương 15,5 triệu đôla, theo số liệu mới công bố của Công ty Nghiên cứu thị
trường Cimigo. “Dù vẫn còn non trẻ, thị trường quảng cáo Việt Nam đã tăng
trưởng 71% so với năm 2008”, ông Lukas Mira, Giám đốc trực tuyến của
Cimigo nhận xét.
Tuy nhiên nếu như nói đến phần mềm tạo banner với nhiều hiệu ứng đẹp
mà không đòi hỏi nhiều kiến thức về banner thì google web designer là một lựa
chọn mà bạn nên trải nghiệm.
Với nhu cầu tất yếu của quảng cáo website hiện nay thì HTML5 là một
lựa chọn tốt hơn Flash banner, vì HTML5 là một ngôn ngữ mới và có nhiều hiệu
ứng mới lạ và phù hợp với xu hướng hiện nay.

1


MỤC LỤC

CHƯƠNG 1 – TỔNG QUAN..............................................................................3
1.1 MÔ TẢ BANNER.......................................................................................3
1.1.1

Các kiểu banner.................................................................................3

1.1.2 Tại sao nên dùng banner.......................................................................5
1.2 NHIỆM VỤ ĐỒ ÁN....................................................................................6
1.3 CẤU TRÚC ĐỒ ÁN...................................................................................7
CHƯƠNG 2 – CÔNG NGHỆ VÀ KĨ THUẬT....................................................8
2.1 Mô Tả Công Cụ Google Web Designer......................................................8
2.1.1 Chức Năng :..........................................................................................9
CHƯƠNG 3 – KẾT QUẢ THỰC NGHIỆM......................................................17
3.1 Gồm 4 Banner (Tết ).................................................................................17
3.1.1 Banner 1..............................................................................................17
3.1.2 Banner 2..............................................................................................17
3.1.3 Banner 3..............................................................................................18
3.2 Các Hiệu Ứng Của 4 Banner.....................................................................19
KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN.........................................................20
Kết Luận..........................................................................................................20
Hướng Phát Triển............................................................................................20

2


CHƯƠNG 1 – TỔNG QUAN
1.1 MÔ TẢ BANNER
Theo từ điển Anh – Việt, Banner có nghĩa là biểu ngữ, lá cờ, khẩu hiệu chính
trị . Tuy nhiên, trong lĩnh vực truyền thông thì banner có nghĩa là tấm bảng quảng cáo
thương hiệu, sản phẩm, dịch vụ nào đó nhằm thu hút sự chú ý của mọi người.

1.1.1 Các kiểu banner
Có hai kiểu banner là: banner đường phố và banner online
Banner đường phố: là những khung hình to, có hình ảnh bắt mắt và chứa đựng
thông tin, ý nghĩa mà doanh nghiệp muốn chuyển tải. Những banner này thường được
đặt ở những cung đường rộng, ngã ba, ngã tư lớn thu hút sự chú ý của người đi

đường.

Hình 1: Quảng Cáo Banner đường phố trên các trục đường cao tốc.
Quảng cáo Banner Online: Đây là những tấm biển quảng cáo được đặt trên
những website có lượng người truy cập lớn như: 24h.com.vn, eva.vn. dantri.com.vn,

3


vietadsgroup.vn,…v.v Những khung hình này thường có kích cỡ giống một chiếc ảnh
4×6, có hình ảnh hoặc video độc đáo, có khi là hình động, chuyển tải thông điệp, ý
nghĩa của một sản phẩm, một thương hiệu của doanh nghiệp tới người xem. Hình thức
này hiện được áp dụng nhiều hơn so với hình thức trên bởi tính hiệu quả của nó cao
hơn gấp nhiều lần.
Mặc dù các banner có thể được thiết kế với kích thước bất kỳ, việc sắp xếp các
banner trên trang web sẽ thuận tiện hơn khi có tiêu chuẩn đối chung. Ủy ban Quảng
cáo tương tác (IAB) khuyến khích các thành viên nên sử dụng bốn dạng quảng cáo
chuẩn là:
Làm sao để tăng hiệu quả quảng cáo trên Banner?
Trước khi tiến hành sử dụng banner, ban nên đến những nhóm đối tượng khách
hàng ưu tiên và tìm hiểu về giá của quảng cáo, lượng khách truy cập của trang web đó.
Để Banner quảng cáo nhận một tỷ lệ phần trăm phản hồi đáng kể, nó cần phải được
thiết kế chuyên nghiệp, bắt mắt. Đừng nghĩ rằng Banner chỉ là hình nhỏ đặt trên trang
web chỉ là một hình nhỏ đặt trên trang web mà lơ là không chú trọng đến nó. Khách
hàng sẽ phản hồi tùy thuộc vào sự hấp dẫn của quảng cáo. Vì thế hãy chắc chắn rằng:
Banner quảng cáo được thiết kế bởi những người chuyên nghiệp hoặc sử dụng
một công ty thiết kế Banner đã quen thuộc với công ty bạn, quan trọng nhất là hiểu về
chiến lược quảng cáo của bạn.
Banner quảng cáo phải có thông điệp quảng cáo rõ ràng về việc nó sẽ đem đến
điều gì cho người tiêu dùng. Một Banner với nội dung mờ hồ sẽ không thể thu hút

được khách hàng.
Banner quảng cáo thành công cần thiết phải sử dụng từ ngữ nhấn mạnh đến lợi
ích của sản phẩm mà nó đang giới thiệu.
Những Banner quảng cáo kết hợp được cả ba điều này có thể nhận được tỉ lệ
click rất cao. Vì chúng là sự kết hợp của hình ảnh để thu hút cặp mắt và nội dung sẽ
tạo động lực để khách hàng click vào đó

4


Hình 2: Quảng cáo banner online - đặt trên trang báo mạng.

1.1.2 Tại sao nên dùng banner
Sự ra đời của Internet kéo theo xuất hiện hình thức quảng cáo trực tuyến.
Chính nhờ khả năng tương tác và định hướng cao,quảng cáo trực tuyến đã dần
chiếm được thị phần đáng kể trên thị trường và đang lấn sân các loại hình quảng
cáo truyền thống như truyền hình và báo in. Doanh thu quảng cáo trực tuyến tại
Việt Nam năm 2009 đạt 278 tỷ đồng, tương đương 15,5 triệu đôla, theo số liệu
mới công bố của Công ty Nghiên cứu thị trường Cimigo. “Dù vẫn còn non trẻ,
thị trường quảng cáo Việt Nam đã tăng trưởng 71% so với năm 2008”, ông
Lukas Mira, Giám đốc trực tuyến của Cimigo nhận xét. Đây là lần đầu tiên một
báo cáo tổng hợp doanh thu quảng cáo trực tuyến tại Việt Nam được công bố.
Trước những năm 2000, quảng cáo ở Việt Nam chủ yếu là truyền hình và
báo in. Đơn vị đi tiên phong trong lĩnh vực quảng cáo trực tuyến ở Việt Nam
phải kể đến VnExpress. Khi báo này ra đời vào năm 2000 với hình thức đặt
banner quảng cáo, khách hàng sẽ trả phí theo vị trí và độ lớn của banner đặt trên
site, hình thức này đã nhanh chóng phổ biến sau đó. Nhưng hiện nay hình thức
này có thể nói là đã quá quen thuộc và chi phí cao vì với hình thức này khách
hàng không nắm được mức độ hiệu quả của quảng cáo. Hơn nữa, khi có sự cố
như nghẽn mạng, website bị tấn công từ chối dịch vụ… phần thiệt hại sẽ thuộc

về khách hàng vì lúc đó dù số lượng truy cập bị giảm rất nhiều, thậm chí bằng
5


không, họ vẫn phải trả tiền quảng cáo như ngày thường. Thứ hai là quảng cáo
bằng banner theo kiểu này có tính định hướng rất thấp vì banner chỉ được “treo”
lên cố định ở một chỗ, theo từng chuyên mục của website và nằm yên đó, không
thay đổi dù nhiều khi những thông tin bài viết nằm dưới nó liên quan rất ít, thậm
chí chẳng liên quan gì đến sản phẩm được quảng cáo.
Bạn có biết một ngày sẽ có bao nhiêu người nhìn thấy banner và click vào
banner của doanh nghiệp bạn. Theo thống kê của trang 24h.com.vn thì website
có 40.000 máy tính đặt làm trang nhà (Home page). Cứ sau mỗi giờ có khoảng
100.000 lượt người vào xem trang đó (Số ước tính cơ bản) và chỉ cần 20 người
có một người để ý đến banner của bạn (Điều này phụ thuộc vào độ hấp dẫn
của banner) thì sau 1h bạn sẽ được 100.000/20 = 5.000 người biết đến quảng
cáo của bạn.
Một ngày, mỗi người thường có 8 tiếng làm việc: x 5000 view = 40.000
lượt người sẽ được quảng cáo theo kiểu "Mắt thấy banner" đối với dịch vụ mà
bạn muốn quảng bá. Con số thực tế còn cao hơn nhiều và lợi ích đem lại cũng
lớn hơn rất nhiều.
Bởi vậy, doanh nghiệp khi lập kế hoạch marketing online sản phẩm cần
phải biết tầm quan trọng của quảng cáo Banner trong việc truyền thông thương
hiệu tới người dùng hiệu quả.
1.2 NHIỆM VỤ ĐỒ ÁN
Hiện nay nếu mỗi trang web mà không có banner thì nó sẽ không được bắt mắt ,
không thu hút được người xem khi vào trang của mình . Thử so sánh giữa trang
web có banner và không có banner thì tất nhiên trang web có banner thì nó sẽ
thu hút lượt truy cập click vào banner và từ đó nhiều người có thể biết đến
quảng cáo của bạn , hay đơn giản là nhưng banner giới thiệu về website của bạn
. Từ đó thì trang web có banner thì nó sẽ có rất nhiều lời thế hơn đồi với trang

web không sử dụng banner .
Thế nên banner có tầm quan trọng và là cần thiết đối với mỗi trang web
1.3 CẤU TRÚC ĐỒ ÁN
6


Đồ Án Cơ Sở gồm 4 chương :
-Chương 1 : Tổng Quan : Tóm Tắt Lý Thuyết , Thực Trạng
-Chương 2 : Công Nghệ và Kĩ Thuật
-Chương 3 : Kết Quả Thực Nghiệm
-Chương 4 : Kết Luận : Nhưng kết luận,Khẳng định những gì đạt được từ Đồ
Án
CHƯƠNG 2 – CÔNG NGHỆ VÀ KĨ THUẬT
2.1 Mô Tả Công Cụ Google Web Designer
Google Web Designer là một ứng dụng web nâng cao được xây dựng cùng với
HTML5, cho phép bạn thiết kế và tạo quảng cáo HTML5 cũng như các nội dung web
khác bằng giao diện mã và trực quan tích hợp. Khi sử dụng chế độ xem thiết kế của
Google Web Designer, bạn có thể tạo nội dung bằng công cụ vẽ, văn bản và đối tượng
3D. Đồng thời, bạn có thể tạo hoạt ảnh cho các đối tượng trên dòng thời gian. Sau khi
bạn đã tạo xong nội dung của mình, Google Web Designer sẽ xuất ra HTML5, CSS3
và Javascript cân đối mà người dùng có thể đọc được.
Khi tạo quảng cáo bằng Google Web Designer, bạn có thể sử dụng thư viện thành
phần. Thư viện này cho phép bạn thêm thư viện hình ảnh, video, công cụ mạng quảng
cáo và nhiều hơn thế nữa.
Chế độ xem mã của Google Web Designer cho phép bạn tạo tệp CSS,
JavaScript và XML bằng tính năng đánh dấu cú pháp và tự động hoàn thành mã để ghi
mã của bạn dễ dàng hơn, ít bị lỗi hơn.
Dù là một ứng dụng trực quan, nhưng bạn hoàn toàn có thể nghiên cứu sâu hơn
vào phần CSS và JavaScript để hiệu chỉnh trang web của mình. Web Designer cho
phép thao tác với tất cả các mã Code một cách trực tiếp. Ngoài ra bạn hoàn toàn có thể

xem trước các ý tưởng của mình trên tất cả chương trình trình duyệt mà bạn đã cài đặt
trên máy tính.Điều thú vị là các công cụ trên Web Designer hoàn toàn quen thuộc với
các bạn. Google cung cấp miễn phí Pen Tool cho công cụ Drawing và Timeline cho
việc quản lí chuyển động( Managing Animations).Web Designer có thể tạo ra các nội

7


dung 3D bằng cách sử dụng sức mạnh của CSS3 cũng như xây dựng các phần để
nhúng hình ảnh, bản đồ, video trên Youtube. Với các đối tượng 3D, các bạn có thể
xoay chúng theo bất kì trục nào.Đối với ảnh động- một trong những tính năng cốt lõi
của Web Designer , có 2 chế độ là: Chỉnh sửa phân cảnh chuyển động nhanh và chế độ
nâng cao, giúp cho các nhà thiết kế có nhiều lựa chọn trong việc tuỳ chỉnh nội dung.

Hình 3: Giao diện google web designer

2.1.1 Chức Năng :
a) Tạo và sửa lỗi nội dung:
-Thêm thẻ
-Use images and video
-Sử dụng công cụ Hình dạnh và Bút
-Use the text tool
-Thêm màu cho đối tượng
-Sử dụng màu tô chuyển tiếp
-Chỉnh sửa mã của bạn
-Thay đổi kiểu bằng bảng điều khiển CSS
-Sử dụng công cụ 3D
b) Tạo hoạt ảnh theo dòng thời gian:

8

Hình 4: Thanh điều chỉnh thời gian hình
Trong Chế độ nhanh, bạn tạo hoạt ảnh theo từng cảnh: bạn thêm một chế độ xem mới
của toàn bộ trang, thay đổi phần tử bạn muốn tạo hoạt ảnh và tùy chọn sửa đổi tốc độ
cũng như thời gian chuyển đổi của mình. Trong Chế độ nhanh, hoạt ảnh bắt đầu ở một
cảnh và kết thúc ở cảnh tiếp theo, không có cách nào để có thời gian bắt đầu và kết
thúc đơn lẻ cho từng phần tử. Để có hoạt ảnh phức tạp hơn, sử dụng Chế độ nâng cao.
Images inside canvas elements, such as the graphics created with the Pen and Shape
tools, can't be changed using timeline animation. The enclosing canvas tag can be
animated (to move the entire tag), but the color or shape of the image in the canvas tag
can't be animated.

-Để tạo hoạt ảnh cho một hành động trong Chế độ nhanh:
Sắp xếp tất cả các phần tử quảng cáo của bạn ở nơi bạn muốn khi hoạt ảnh bắt
đầu.

Nhấp vào nút thêm cảnh.
Thay đổi các phần tử mà bạn muốn tạo hoạt ảnh. Thao tác này có thể bao gồm
di chuyển và xoay phần tử, thay đổi màu, kích thước hoặc bất kỳ tham số nào
khác của phần tử.
Lặp lại bước 2 và 3 để thêm số cảnh như bạn muốn vào hoạt ảnh của bạn.
-Phát hoạt ảnh của bạn
Khi bạn tạo hoạt ảnh, bạn có thể xem giao diện của chúng bằng cách nhấp vào
nút phát

ở đầu dòng thời gian hoạt ảnh. Để lặp phát lại hoạt ảnh của bạn,

nhấp vào nút lặp lại bên cạnh nút phát rồi nhấp phát. Phát lại hoạt ảnh chỉ nhằm
9

giúp bạn hình dung hoạt ảnh của bạn - Bạn không thể chỉnh sửa hoặc thay đổi
các tệp của bạn trong khi đang phát hoạt ảnh và hoạt động này không ảnh hưởng
đến tác phẩm đã xem trước hoặc đã xuất bản của bạn.
-Để thay đổi hiệu ứng chuyển đổi giữa các cảnh, nhấp vào biểu tượng chuyển
đổi giữa các cảnh.

Trình chỉnh sửa chuyển đổi sẽ mở ra.

Trong trình chỉnh sửa chuyển đổi, bạn có thể nhấp vào từng phần để:
Thay đổi thời gian chuyển đổi
Thêm khung hình chính mới
Thay đổi loại tốc độ
c) Sử dụng thành phần:
-Thành phần YouTube
Thành phần YouTube cho phép bạn đặt một video trên YouTube vào quảng cáo
của bạn.
Để thêm thành phần video trên YouTube vào dự án của bạn:
Mở bảng điều khiển thành phần.
Kéo thành phần YouTube vào vùng hiển thị.
Đặt các thuộc tính của video trong bảng điều khiển thuộc tính video.
Thuộc tính video
10


Thuộc
tính

Mô tả

Tên

Đặt tên cho video trên YouTube.

URL

URL cho video trên YouTube mà bạn muốn hiển thị.

Tự động

Khi được chọn, video trên YouTube của bạn sẽ tự động phát khi

phát

trang đã tải.

Điều

Cho phép bạn chọn cách hiển thị các nút điều khiển:

khiển

Tự động ẩn - Thanh tiến độ video và các nút điều khiển trình phát
trượt ra khỏi chế độ xem chỉ vài giây sau khi video bắt đầu phát.
Các nút điều khiển xuất hiện lại nếu người dùng tương tác với
trình phát video.
Không có - Ẩn thanh tiến độ và các nút điều khiển trình phát.
11

Hiển thị - Hiển thị thanh tiến độ và các nút điều khiển trình phát.
Chủ

đề

Cho phép bạn chọn chủ đề tối hoặc sáng cho trình phát.

trình
phát
Tắt tiếng

Khi được chọn, tắt tiếng video trên YouTube.

Chú

Khi được chọn, hiển thị các chú thích trên YouTube.

thích
Video

Khi được chọn, hiển thị các video liên quan trên YouTube khi

liên quan

video gốc kết thúc.

Lặp lại

Khi được chọn, video trên YouTube sẽ phát lại.

Tiêu đề

Khi được chọn, hiển thị tiêu đề của video trên YouTube.

Vị trí bắt

Cho phép bạn đặt vị trí bắt đầu tính bằng giây cho video trên

đầu
Preview

YouTube.

Components can't be previewed inside the Google Web Designer interface. To
see the component in action, preview your ad in your preferred browser.
Sự kiện
Sự kiện là cách bạn kết nối một cử chỉ vật lý của người dùng với một hành động
trong quảng cáo của bạn. Thành phần YouTube gửi các sự kiện có thể được
dùng để kích hoạt các tác vụ khác như bên dưới:
Tải
Đã kết thúc
Tạm dừng
Đang phát
Các sự kiện khác có thể kích hoạt tác vụ sau đây trên YouTube:
Phát
Tạm dừng
Phát lại
Bật tắt tiếng
12

Tìm kiếm
Đặt ID video trên YouTube
d) Tạo quảng cáo :
-Quảng cáo biểu ngữ:
Khi bạn tạo quảng cáo biểu ngữ mới, Google Web Designer sẽ tạo một trang
biểu ngữ (trang 1) có kích thước ở kích thước biểu ngữ mà bạn đã chỉ định.

Hình 5:Thiết kế biểu ngữ

-Để đặt trang biểu ngữ chính của bạn:
Nhập hình ảnh của bạn bằng cách kéo chúng vào vùng làm việc hoặc bằng thẻ
hình ảnh.
Sắp xếp hình ảnh của bạn và bất kỳ phần tử nào khác mà bạn muốn sử dụng trên
vùng hiển thị.
13


Tùy chọn tạo hoạt ảnh hoặc đưa các thành phần vào trang.
e) Xem trước và xuất bản tác phẩm của bạn:
-Xem trước quảng cáo hoặc trang HTML của bạn
Khi bạn tạo quảng cáo hoặc trang HTML, bạn có thể xem trước chúng trên trình
duyệt yêu thích để biết giao diện và cách hoạt động của chúng khi được xuất
bản.

Để xem trước tác phẩm của bạn, nhấp vào nút xem trước

ở cuối màn

hình.
Google Web Designer nhận dạng các trình duyệt được hỗ trợ trên hệ thống của
bạn và cho phép bạn chọn một trong các trình duyệt mà bạn muốn sử dụng.

Để chọn trình duyệt mà bạn muốn xem trước tác phẩm của mình, nhấp vào mũi
tên lựa chọn ở bên phải của nút xem trước và chọn trình duyệt mà bạn muốn sử
dụng từ danh sách bật lên.
-Xuất bản quảng cáo hoặc trang HTML của bạn
Khi bạn hài lòng với quảng cáo hoặc trang HTML của mình, bạn có thể xuất

bản bằng cách nhấp vào nút xuất bản

ở cuối vùng hiển thị. Khi xuất

bản, Google Web Designer thêm mã trình cấp phép thích hợp cho quảng cáo
trên AdMob và DoubleClick cũng như cho phép bạn chọn từ một tập hợp các
tùy chọn thích hợp với loại quảng cáo.

f) Khắc phục và giải quyết các sự cố thường gặp:
14


-Sử dụng Google Web Designer với máy chủ proxy
-Bật Tính năng ghi lỗi chi tiết
CHƯƠNG 3 – KẾT QUẢ THỰC NGHIỆM
3.1 Gồm 4 Banner (Tết )
3.1.1 Banner 1
Mô tả: -Chữ Chạy Trên Xuống
- Chữ mờ sau đó xuất hiện lại
- Hiệu ứng pháo hao

Hình 6: Banner 1

3.1.2 Banner 2
Mô tả: - Chữ Chạy Trên Xuống
- Chữ mờ rồi hiển lại
- Gif Xoay Tròn

15


Hình 7: Banner 2

3.1.3 Banner 3
Mô tả: -Banner dần hiện ra
-Hình ảnh lân từ hai bên chạy vào.
-Gif bươm bướm bay khắp banner.
-Chữ Happy new year nháy lần lượt.

Hình 8: Banner 3

3.1.4 Banner 4

16


Hình 9: Banner 4

3.2 Các Hiệu Ứng Của 4 Banner
 Hiệu ứng chữ chạy

 Hiệu ứng chữ nháy , ẩn , hiện
 Hiệu ứng chữ phóng to phóng nhỏ
 Hiệu ứng pháo hoa
 Hiệu Ứng Ảnh Di Chuyển
 Hiêu hứng Gif
 Chèn code getyear vào banner

17


KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN
Kết Luận
Từ Đồ án cơ sở làm banner động em rút ra được nhiều kiến thức và làm quen
được công cụ Google web designer , hiểu thêm về cộng nghệ HTML5 và CS3 , cách
làm được một banner động . Khi một trang web có một banner đẹp thì sẽ thu hút được
nhiều lượt truy cập tới trang web đó.
Đây là một kiến thức rất bổ ích nó giúp em thêm nhiều trong việc làm
web,công cụ Google web designer là một công cụ rất tuyệt vời.

Hướng Phát Triển
Sau khi thực hiện việc thiết kế banner trên google web designer em sẽ chèn
banner vào chính trang web mà em đang xây dựng và dùng banner để tạo quảng cáo
trực tuyến cho các doanh nghiệp thông qua các website.
Em xin chân thành cảm ơn Giảng Viên Nguyễn Anh Tuấn đã hướng dẫn em làm
đồ án cơ sở này.

18