báo cáo đồ án cơ sở chuyên ngành thiết kế website banner .báo cáo đồ án cơ sở chuyên ngành thiết kế website banner .báo cáo đồ án cơ sở chuyên ngành thiết kế website banner .báo cáo đồ án cơ sở chuyên ngành thiết kế website banner .báo cáo đồ án cơ sở chuyên ngành thiết kế website banner .báo cáo đồ án cơ sở chuyên ngành thiết kế website banner
MỞ ĐẦU Hiện nay, có nhiều phần mềm giúp tạo banner đẹp mang phong cách riêng.Có cách lựa chọn dùng Flash banner HTML5, với nhu cầu quảng cáo Sự đời Internet kéo theo xuất hình thức quảng cáo trực tuyến Chính nhờ khả tương tác định hướng cao,quảng cáo trực tuyến dần chiếm thị phần đáng kể thị trường lấn sân loại hình quảng cáo truyền thống truyền hình báo in Doanh thu quảng cáo trực tuyến Việt Nam năm 2009 đạt 278 tỷ đồng, tương đương 15,5 triệu đôla, theo số liệu công bố Công ty Nghiên cứu thị trường Cimigo “Dù 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 Cimigo nhận xét Tuy nhiên 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 banner google web designer lựa chọn mà bạn nên trải nghiệm Với nhu cầu tất yếu quảng cáo website HTML5 lựa chọn tốt Flash banner, HTML5 ngơn ngữ có nhiều hiệu ứng lạ phù hợp với xu hướng MỤC LỤC CHƯƠNG – TỔNG QUAN 1.1 MÔ TẢ BANNER .3 1.1.1 Các kiểu banner .3 1.1.2 Tại nên dùng banner .5 1.2 NHIỆM VỤ ĐỒ ÁN 1.3 CẤU TRÚC ĐỒ ÁN CHƯƠNG – CÔNG NGHỆ VÀ KĨ THUẬT 2.1 Mô Tả Công Cụ Google Web Designer 2.1.1 Chức Năng : CHƯƠNG – KẾT QUẢ THỰC NGHIỆM 17 3.1 Gồm Banner (Tết ) .17 3.1.1 Banner 17 3.1.2 Banner 17 3.1.3 Banner 18 3.2 Các Hiệu Ứng Của 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 CHƯƠNG – TỔNG QUAN 1.1 MÔ TẢ BANNER Theo từ điển Anh – Việt, Banner có nghĩa biểu ngữ, cờ, hiệu trị Tuy nhiên, lĩnh vực truyền thơng banner có nghĩa bảng quảng cáo thương hiệu, sản phẩm, dịch vụ nhằm thu hút ý người 1.1.1 Các kiểu banner Có hai kiểu banner là: banner đường phố banner online Banner đường phố: khung hình to, có hình ảnh bắt mắt chứa đựng thông tin, ý nghĩa mà doanh nghiệp muốn chuyển tải Những banner thường đặt cung đường rộng, ngã ba, ngã tư lớn thu hút ý người đường Hình 1: Quảng Cáo Banner đường phố trục đường cao tốc Quảng cáo Banner Online: Đây biển quảng cáo đặt website có lượng người truy cập lớn như: 24h.com.vn, eva.vn dantri.com.vn, vietadsgroup.vn,…v.v Những khung hình thường có kích cỡ giống ảnh 4×6, có hình ảnh video độc đáo, có hình động, chuyển tải thơng điệp, ý nghĩa sản phẩm, thương hiệu doanh nghiệp tới người xem Hình thức áp dụng nhiều so với hình thức tính hiệu cao gấp nhiều lần Mặc dù banner thiết kế với kích thước bất kỳ, việc xếp banner trang web thuận tiện có tiêu chuẩn đối chung Ủy ban Quảng cáo tương tác (IAB) khuyến khích thành viên nên sử dụng bốn dạng quảng cáo chuẩn là: Làm để tăng hiệu quảng cáo Banner? Trước tiến hành sử dụng banner, ban nên đến nhóm đối tượng khách hàng ưu tiên tìm hiểu giá quảng cáo, lượng khách truy cập trang web Để Banner quảng cáo nhận tỷ lệ phần trăm phản hồi đáng kể, cần phải thiết kế chuyên nghiệp, bắt mắt Đừng nghĩ Banner hình nhỏ đặt trang web hình nhỏ đặt trang web mà lơ khơng trọng đến Khách hàng phản hồi tùy thuộc vào hấp dẫn quảng cáo Vì chắn rằng: Banner quảng cáo thiết kế người chuyên nghiệp sử dụng công ty thiết kế Banner quen thuộc với công ty bạn, quan trọng hiểu chiến lược quảng cáo bạn Banner quảng cáo phải có thơng điệp quảng cáo rõ ràng việc đem đến điều cho người tiêu dùng Một Banner với nội dung mờ hồ thu hút 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 sản phẩm mà giới thiệu Những Banner quảng cáo kết hợp ba điều nhận tỉ lệ click cao Vì chúng kết hợp hình ảnh để thu hút cặp mắt nội dung tạo động lực để khách hàng click vào Hình 2: Quảng cáo banner online - đặt trang báo mạng 1.1.2 Tại nên dùng banner Sự đời Internet kéo theo xuất hình thức quảng cáo trực tuyến Chính nhờ khả tương tác định hướng cao,quảng cáo trực tuyến dần chiếm thị phần đáng kể thị trường lấn sân loại hình quảng cáo truyền thống truyền hình báo in Doanh thu quảng cáo trực tuyến Việt Nam năm 2009 đạt 278 tỷ đồng, tương đương 15,5 triệu đôla, theo số liệu công bố Cơng ty Nghiên cứu thị trường Cimigo “Dù 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 Cimigo nhận xét Đây lần báo cáo tổng hợp doanh thu quảng cáo trực tuyến Việt Nam công bố Trước năm 2000, quảng cáo Việt Nam chủ yếu truyền hình báo in Đơn vị tiên phong lĩnh vực quảng cáo trực tuyến Việt Nam phải kể đến VnExpress Khi báo đời vào năm 2000 với hình thức đặt banner quảng cáo, khách hàng trả phí theo vị trí độ lớn banner đặt site, hình thức nhanh chóng phổ biến sau Nhưng hình thức nói quen thuộc chi phí cao với hình thức khách hàng không nắm mức độ hiệu quảng cáo Hơn nữa, có cố nghẽn mạng, website bị công từ chối dịch vụ… phần thiệt hại thuộc khách hàng lúc dù số lượng truy cập bị giảm nhiều, chí không, họ phải trả tiền quảng cáo ngày thường Thứ hai quảng cáo banner theo kiểu có tính định hướng thấp banner “treo” lên cố định chỗ, theo chuyên mục website nằm yên đó, không thay đổi dù nhiều thông tin viết nằm liên quan ít, chí chẳng liên quan đến sản phẩm quảng cáo Bạn có biết ngày có người nhìn thấy banner click vào banner doanh nghiệp bạn Theo thống kê trang 24h.com.vn website có 40.000 máy tính đặt làm trang nhà (Home page) Cứ sau có khoảng 100.000 lượt người vào xem trang (Số ước tính bản) cần 20 người có người để ý đến banner bạn (Điều phụ thuộc vào độ hấp dẫn banner) sau 1h bạn 100.000/20 = 5.000 người biết đến quảng cáo bạn Một ngày, người thường có tiếng làm việc: x 5000 view = 40.000 lượt người quảng cáo theo kiểu "Mắt thấy banner" dịch vụ mà bạn muốn quảng bá Con số thực tế cao nhiều lợi ích đem lại lớn nhiều Bởi vậy, doanh nghiệp lập kế hoạch marketing online sản phẩm cần phải biết tầm quan trọng quảng cáo Banner việc truyền thông thương hiệu tới người dùng hiệu 1.2 NHIỆM VỤ ĐỒ ÁN Hiện trang web mà khơng có banner không bắt mắt , không thu hút người xem vào trang Thử so sánh trang web có banner khơng có banner tất nhiên trang web có banner thu hút lượt truy cập click vào banner từ nhiều người biết đến quảng cáo bạn , hay đơn giản banner giới thiệu website bạn Từ trang web có banner có nhiều lời đồi với trang web không sử dụng banner Thế nên banner có tầm quan trọng cần thiết trang web 1.3 CẤU TRÚC ĐỒ ÁN Đồ Án Cơ Sở gồm chương : -Chương : Tổng Quan : Tóm Tắt Lý Thuyết , Thực Trạng -Chương : Công Nghệ Kĩ Thuật -Chương : Kết Quả Thực Nghiệm -Chương : Kết Luận : Nhưng kết luận,Khẳng định đạt từ Đồ Án CHƯƠNG – CÔNG NGHỆ VÀ KĨ THUẬT 2.1 Mô Tả Công Cụ Google Web Designer Google Web Designer ứng dụng web nâng cao xây dựng với HTML5, cho phép bạn thiết kế tạo quảng cáo HTML5 nội dung web khác giao diện mã trực quan tích hợp Khi sử dụng chế độ xem thiết kế Google Web Designer, bạn tạo nội dung công cụ vẽ, văn đối tượng 3D Đồng thời, bạn tạo hoạt ảnh cho đối tượng dòng thời gian Sau bạn tạo xong nội dung mình, Google Web Designer xuất HTML5, CSS3 Javascript cân đối mà người dùng đọc Khi tạo quảng cáo Google Web Designer, bạn sử dụng thư viện thành phần Thư viện cho phép bạn thêm thư viện hình ảnh, video, cơng cụ mạng quảng cáo nhiều Chế độ xem mã Google Web Designer cho phép bạn tạo tệp CSS, JavaScript XML tính đánh dấu cú pháp tự động hoàn thành mã để ghi mã bạn dễ dàng hơn, bị lỗi Dù ứng dụng trực quan, bạn hồn tồn nghiên cứu sâu vào phần CSS JavaScript để hiệu chỉnh trang web Web Designer cho phép thao tác với tất mã Code cách trực tiếp Ngồi bạn hồn tồn xem trước ý tưởng tất chương trình trình duyệt mà bạn cài đặt máy tính.Điều thú vị cơng cụ Web Designer hoàn toàn quen thuộc với bạn Google cung cấp miễn phí Pen Tool cho cơng cụ Drawing Timeline cho việc quản lí chuyển động( Managing Animations).Web Designer tạo nội dung 3D cách sử dụng sức mạnh CSS3 xây dựng phần để nhúng hình ảnh, đồ, video Youtube Với đối tượng 3D, bạn xoay chúng theo trục nào.Đối với ảnh động- tính cốt lõi Web Designer , có chế độ là: Chỉnh sửa phân cảnh chuyển động nhanh chế độ nâng cao, giúp cho nhà thiết kế có nhiều lựa chọn 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 sửa lỗi nội dung: -Thêm thẻ -Use images and video -Sử dụng cơng cụ Hình dạnh 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ã bạn -Thay đổi kiểu 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: Hình 4: Thanh điều chỉnh thời gian hình Trong Chế độ nhanh, bạn tạo hoạt ảnh theo cảnh: bạn thêm chế độ xem toàn trang, thay đổi phần tử bạn muốn tạo hoạt ảnh tùy chọn sửa đổi tốc độ thời gian chuyển đổi Trong Chế độ nhanh, hoạt ảnh bắt đầu cảnh kết thúc cảnh tiếp theo, khơng có cách để có thời gian bắt đầu kết thúc đơn lẻ cho 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 hành động Chế độ nhanh: Sắp xếp tất phần tử quảng cáo bạn nơi bạn muốn hoạt ảnh bắt đầu Nhấp vào nút thêm cảnh Thay đổi phần tử mà bạn muốn tạo hoạt ảnh Thao tác bao gồm di chuyển xoay phần tử, thay đổi màu, kích thước tham số khác phần tử Lặp lại bước để thêm số cảnh bạn muốn vào hoạt ảnh bạn -Phát hoạt ảnh bạn Khi bạn tạo hoạt ảnh, bạn xem giao diện chú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 bạn, nhấp vào nút lặp lại bên cạnh nút phát nhấp phát Phát lại hoạt ảnh nhằm giúp bạn hình dung hoạt ảnh bạn - Bạn chỉnh sửa thay đổi tệp bạn phát hoạt ảnh hoạt động không ảnh hưởng đến tác phẩm xem trước xuất bạn -Để thay đổi hiệu ứng chuyển đổi cảnh, nhấp vào biểu tượng chuyển đổi cảnh Trình chỉnh sửa chuyển đổi mở Trong trình chỉnh sửa chuyển đổi, bạn nhấp vào phần để: Thay đổi thời gian chuyển đổi Thêm khung hình 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 video YouTube vào quảng cáo bạn Để thêm thành phần video YouTube vào dự án 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 thuộc tính video 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 YouTube URL URL cho video YouTube mà bạn muốn hiển thị Tự động Khi chọn, video YouTube bạn tự động phát phát trang tải Điều Cho phép bạn chọn cách hiển thị nút điều khiển: khiển Tự động ẩn - Thanh tiến độ video nút điều khiển trình phát trượt khỏi chế độ xem vài giây sau video bắt đầu phát Các nút điều khiển xuất lại người dùng tương tác với trình phát video Khơng có - Ẩn tiến độ nút điều khiển trình phát 11 Hiển thị - Hiển thị tiến độ nút điều khiển trình phát Chủ đề Cho phép bạn chọn chủ đề tối sáng cho trình phát trình phát Tắt tiếng Khi chọn, tắt tiếng video YouTube Chú Khi chọn, hiển thị thích YouTube thích Video Khi chọn, hiển thị video liên quan YouTube liên quan video gốc kết thúc Lặp lại Khi chọn, video YouTube phát lại Tiêu đề Khi chọn, hiển thị tiêu đề video YouTube Vị trí bắt Cho phép bạn đặt vị trí bắt đầu tính giây cho video đầ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 cách bạn kết nối cử vật lý người dùng với hành động quảng cáo bạn Thành phần YouTube gửi kiện dùng để kích hoạt tác vụ khác bên dưới: Tải Đã kết thúc Tạm dừng Đang phát Các kiện khác kích hoạt tác vụ sau 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 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 tạo trang biểu ngữ (trang 1) có kích thước kích thước biểu ngữ mà bạn định Hình 5:Thiết kế biểu ngữ -Để đặt trang biểu ngữ bạn: Nhập hình ảnh bạn cách kéo chúng vào vùng làm việc thẻ hình ảnh Sắp xếp hình ảnh bạn phần tử khác mà bạn muốn sử dụng vùng hiển thị 13 Tùy chọn tạo hoạt ảnh đưa thành phần vào trang e) Xem trước xuất tác phẩm bạn: -Xem trước quảng cáo trang HTML bạn Khi bạn tạo quảng cáo trang HTML, bạn xem trước chúng trình duyệt u thích để biết giao diện cách hoạt động chúng xuất Để xem trước tác phẩm bạn, nhấp vào nút xem trước cuối hình Google Web Designer nhận dạng trình duyệt hỗ trợ hệ thống bạn cho phép bạn chọn 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 mình, nhấp vào mũi tên lựa chọn bên phải nút xem trước chọn trình duyệt mà bạn muốn sử dụng từ danh sách bật lên -Xuất quảng cáo trang HTML bạn Khi bạn hài lòng với quảng cáo trang HTML mình, bạn xuất cách nhấp vào nút xuất 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 AdMob DoubleClick cho phép bạn chọn từ tập hợp tùy chọn thích hợp với loại quảng cáo f) Khắc phục giải cố thường gặp: 14 -Sử dụng Google Web Designer với máy chủ proxy -Bật Tính ghi lỗi chi tiết CHƯƠNG – KẾT QUẢ THỰC NGHIỆM 3.1 Gồm Banner (Tết ) 3.1.1 Banner Mô tả: -Chữ Chạy Trên Xuống - Chữ mờ sau xuất lại - Hiệu ứng pháo hao Hình 6: Banner 3.1.2 Banner Mô tả: - Chữ Chạy Trên Xuống - Chữ mờ hiển lại - Gif Xoay Tròn 15 Hình 7: Banner 3.1.3 Banner Mơ tả: -Banner dần -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 Hình 8: Banner 3.1.4 Banner 16 Hình 9: Banner 3.2 Các Hiệu Ứng Của Banner Hiệu ứng chữ chạy Hiệu ứng chữ nháy , ẩ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 sở làm banner động em rút nhiều kiến thức làm quen công cụ Google web designer , hiểu thêm cộng nghệ HTML5 CS3 , cách làm banner động Khi trang web có banner đẹp thu hút nhiều lượt truy cập tới trang web Đây kiến thức bổ ích giúp em thêm nhiều việc làm web,công cụ Google web designer công cụ tuyệt vời Hướng Phát Triển Sau thực việc thiết kế banner google web designer em chèn banner vào trang web mà em xây dựng dùng banner để tạo quảng cáo trực tuyến cho doanh nghiệp thông qua 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 sở 18 ... TỔNG QUAN 1.1 MÔ TẢ BANNER .3 1.1.1 Các kiểu banner .3 1.1.2 Tại nên dùng banner .5 1.2 NHIỆM VỤ ĐỒ ÁN 1.3 CẤU TRÚC ĐỒ ÁN CHƯƠNG – CÔNG NGHỆ... rằng: Banner quảng cáo thiết kế người chuyên nghiệp sử dụng công ty thiết kế Banner quen thuộc với công ty bạn, quan trọng hiểu chiến lược quảng cáo bạn Banner quảng cáo phải có thơng điệp quảng cáo. .. hiệu 1.2 NHIỆM VỤ ĐỒ ÁN Hiện trang web mà khơng có banner khơng bắt mắt , khơng thu hút người xem vào trang Thử so sánh trang web có banner khơng có banner tất nhiên trang web có banner thu hút