Tiểu luận học phần thiết kế web

Do đó, tận dụng vào yếu tố của internet và nhu cầu người dùng biến nó thành một công cụ đắc lực thành một website Pixapay giúp ích cho công việc quảng bá thương hiệu và lưu trữ hình ảnh

TP Hồ Chí Minh, ngày 24 tháng 8 năm 2022

TP Hồ Chí Minh, ngày 24 tháng 8 năm 2022

LỜI CẢM ƠN

Trước tiên em xin gửi lời cảm ơn đến thầy Nguyễn Mai Huy giảng viên hướng dẫn

em về môn học chuyên ngành và hướng dẫn em về đồ án web, giúp em có thê thiết kế trang web https://nghuy2603.github.io/webpixalbay/ nay Em cam ơn thầy đã nhiệt tình giảng dạy em trên lớp, hỗ trợ em về những thông tin cần thiết và giải đáp thắc mắc cho em trong suốt quá trình học tập và hướng dẫn tận tỉnh về thiết kế đề tài lần này

Đồng thời em cũng sửi lời cảm ơn đến các bạn cùng lớp đã chia sẻ kinh nghiệm trong quá trình học tập những kiến thức liên quan đến môn học đù là những vấn đề nhỏ

nhất Và em cũng xin cảm ơn thầy và các bạn đã đưa ra những lời nhận xét góp ý để

em có thể rút ra những kinh nghiệm cho quá trình thiết kế web

https://nghuy2603.github.10/webpixalbay/

Và đây cũng là lần đầu tiên em viết đồ án thiết kế web nên còn thiểu nhiều kinh

nghiệm nên chắc hãn bài làm sẽ còn nhiều vấn đề sai sót Nên em mong nhận được

sự góp ý và nhận xét tận tỉnh từ thay Đề em có thể rút kinh nghiệm cho cac bai lần

sau chỉnh chu và hoàn hảo hơn

Một lân nữa em xIn chân thành cảm ơn

Sinh viên thực hiện Nguyễn Quốc Huy

LỜI MỞ ĐẦU

Trong xã hội hiện đại ngày nay, việc sử dụng internet ngày càng phô biến rộng rãi

và mạnh mẽ Việc giới trẻ hay các nhà doanh nghiệp sử dụng hình ảnh quảng bá và xây dựng thương hiệu để thu hút khách hàng rất nhiều Do đó, tận dụng vào yếu tố của internet và nhu cầu người dùng biến nó thành một công cụ đắc lực thành một website Pixapay giúp ích cho công việc quảng bá thương hiệu và lưu trữ hình ảnh cá

nhân một cách tối ưu và thời thượng nhất Cùng với các tính năng như giảm hao tôn

dữ liệu, không giới hạn hình ảnh hay video lưu trữ và đăng tải bài, giảm chị phí

quảng bá hình ảnh Tuy nhiên, nhiều nhà doanh nghiệp hay các bạn trẻ vẫn còn đang băng khoăn về sự riêng tư sợ bị đánh cắp hình ảnh hay nhiều người lấy ảnh đó làm

dao nhai v6 toi va https://nqghuy2603.github.io/webpixalbay/ mong rằng sẽ giải

quyết mọi vấn đề đắn đo đó, giúp người dùng thoải mái sống với chính mình, quảng

bá hình ảnh cá nhân hay xây dựng thương hiệu theo cách riêng mà người dùng mong

muốn Pixapay, hình ảnh của cá nhân hay doanh nghiệp sẽ được quảng bá trên trang chính chủ của người dùng khi đăng nhập và cài đặt theo chế độ quyên riêng tư hoặc

công khai mả người dùng muốn Cùng với đó, sẽ có vô vàng hình ảnh miễn phí giúp

người đùng lưu trữ giúp thiết kế, sưu tập đa dạng hơn và hình ảnh khi lưu về sử dụng

sẽ không bị nhòe Không sợ bị mất hình ảnh hay quyền riêng tư, mà còn sở hữu vô vàng hình ảnh đẹp giúp ích cho công việc Doanh nghiệp đây mạnh xúc tiễn quảng bá thương hiệu ra ngoài quốc tế, tăng được nhiều mối quan hệ tương tác trên internet như ngay nay VÌ vậy tôi lựa chọn thiết kế trang web

https://nghuy2603.github.io/webpixalbay/ mong muén no dap tng nhu cầu của người

dùng Và mong rằng, thiết kế này sẽ nhận được sự tương tác của người dùng mãnh

liệt nhất

NHAN XET & CHAM DIEM

Tp Hồ Chí Minh ngày tháng nam 20

GIANG VIEN

ll

MỤC LỤC

Chương 1 Cơ sở lý thuyết 5 c- s SE E11 pm rgưên 1

1 Ngôn ngữ HTML Š - - L2 0 22112 1211122111211 11 1111111101111 1011110111111 182111 kk 1

làn) ¡5Á Ị I9 — Ị 1.3 DHTML /HTML 5 - 1S 2.22121111111111 11 111011111111 111 11111111 111111 111 gxkt 2

5.1 Kat mi@m iii ccccccccecccccevecessesevettesettnesatevanseecssseceseceseeeeeeseseeeeusaaaeses 9

5.2 Một số thông tin vé Github ices cecessesecseesesseecseesseseesesssuecsessessesseees 9 5.3 Cách tiếp cận S111 1111212 1212122 111121 121211 122g tra 10

0n hố 10

Chương 2: Xây dựng website Pixabay -50 eects II

1 Giới thiệu website Pixapay L nnnnnHnnn H111 2 1110121111 khay 11

món ẽ 11

Ij\ ti ăniẼẳiaa'iâäÝŸi 11

2 Cơ sở dữ liệu 22521 222111111122211111110011111 1000221111002 18 nen 11

3 Giao diện của chức năng websife Q0 002012110112 21 111111 211111111 r2 11

a Phan 1: Navbate c.ccccccccccccccssesessesseserestessssesensesetectieseessreticsetissusseteesetesesees 12

b Phần 2: Main 2-22 2S 22121121127121221121121111211111121221122222 1a 12

li 60 a 13

d Phần 4: Scroll to tOpD s5 + S1 SE1511211 1111111112111 1 111 111 11111 rtu 13

Chương 3 Kết luận 2 212222 reekrrerrrei 14

1 Ưu điểm của đồ án 222 1222111112211111222111122111110 11111111 11101011 1 g6 14

2 Hạn chế của đồ án - 5 S11 1127121121121 rre 14

Ảnh 1.12: Ảnh menu chức năng của Pixabay

Ảnh 1.13: Ảnh bên trong vùng chứa

Ảnh 1.14: mô tả hình Sroll to top

Vi

DANH MUC CHU VIET TAT

5 SVG Scalable Vector Graphics

6 API Application Programming Interface

7 XHTML Extensible HyperText Markup

NỘI DUNG Chương 1: Cơ sở lí thuyết

1 Ngôn ngữ HTML 5

1.1.HTML 5

1.1.Hình ảnh ngôn ngữ HTML Cung cấp nhiều API khác nhau bao gồm kéo và thả và lưu trữ trên Web (mặc dù về mặt kỹ thuật, cái sau hiện nam ngoai HTML 5)

- Thậm chí xác định một số xử lý cho các tải liệu không hợp lệ để có tính đồng nhất cao hơn trong các phản hồi đối với lỗi cú pháp

- Được chính thức thông qua vào tháng 10 năm 2014

- Nhưng đã được phát triển trong 10 năm và được hỗ trợ rộng rãi trước năm 2014

- Abode Flash được thay thế (với sự chứng thực năm 2010 của Apple) con neười

- Bao gồm các phần tử <video>, <audio> và <canvas>

- Đề họa vector có thể mở rong (SVG)

- Môn Toán ML (vì vậy công thức không nhất thiết phải là hình ảnh)

- Đăng ký HTML 4, XHTML 1 và DOM Level 2 HTML

- Xử lý tốt hơn nội dung đa phương tiện và đồ họa để tránh sử dụng các trình cắm độc quyền

1.2 DHTML: Là một HTML động

- Thay đổi nội dung (hoặc các thuộc tính của nó một cách nhanh chóng)

- E g Biến các đối tượng trở nên hữu hình / vô hình

- Tương phản với Ajax ở chỗ tất cả các quá trình xử lý được thực hiện ở phía máy

khách 1

1.3 DHTML / HTML 5: Là một cách tiếp cận hữu ích nhờ tính di động

- Chạy cùng một mã trên bất kỳ thứ gì bằng trình đuyệt Web (một số vẫn cần mã hóa cho trình duyệt cụ thé, nhung it hon mỗi năm)

- Tối đa hóa thông dịch phía máy khách

- Vị dụ: ø để chạy một cách thích hợp trên nhiều loại thiết bị

- Khả năng tìm kiếm và khả năng mở đối với trình đọc mản hình

- Cung cấp nhiều nội dung nhất có thê để xử lý bằng máy

- Google không thê tiếp cận bên trong một ứng dụng Java đề tìm và lập chỉ mục nội dung của bạn (và đó là cách mọi người tìm kiếm mọi thứ ngày nay)

- Ngày cảng phố biến

- Có thể là vì những lý do trên, và nó cũng đang trở nên đủ mạnh để thực hiện hầu hết những gì bạn muốn mà không cần dùng đến Java , Net, Objective-C

phong cách cho trang web Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò

định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi

bố cục, màu sắc trang, đối màu chữ, font chữ, thay đổi cấu trúc

- CSS duoc phat trién boi W3C (World Wide Web Consortium) vao năm 1996, vì HTML không được thiết kế để gắn tag dé giúp định dang trang web

- Phương thức hoạt động của CSS là nó sẽ tìm dựa vào các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hay nhiều kiểu khác Sau đó là nó sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó

- Mối tương quan giữa HTML và CSS rất mật thiết HTML là ngôn ngữ markup (nền

tảng của site) và CSS định hình phong cách (tất cả những gì tạo nên giao diện

website), chúng là không thê tách rời

2.2 Bố cục

- Bồ cục C§S thường chủ yếu dựa vào hình hộp và mỗi hộp đều chiếm những khoảng

trống trên trang của bạn với các thuộc tính như:

+ Padding: Gồm không gian xung quanh nội dung (ví dụ: xung quanh đoạn văn bản)

3

+ Border: Là đường liền nằm ngay bên ngoài phần đệm

+ Margin: Là khoảng cách xung quanh bên ngoải của phần tử

2.3 Cấu trúc

- Một đoạn CSS bao gồm các phần

=> vùng chọn { thuộc tính : pgiátr; thuộc tính: giá trị; }

- Nghĩa là nó sẽ được khai báo bằng vùng chọn, sau đó các thuộc tính và giá trị sẽ nam bên trong cặp dấu ngoặc nhọn ƒ} Mỗi thuộc tính sẽ luôn có một giá trị riêng, giá trị có thê là dạng số, hoặc các tên giá trị trong danh sách có sẵn của CSS Phần giá trị

và thuộc tính phải được cách nhau bằng dấu hai chấm, và mỗi một dòng khai báo thuộc tính sẽ luôn có dấu chấm phây ở cuối Một vùng chọn có thé str dụng không giới hạn thuộc tính

+ Nhờ CSS mà source code cua trang Web sé duoc tổ chức gon gang hon, trat tw hon Nội dung trane web sẽ được tách bạch hơn trong việc định dang hiển thị Từ đó, quá trình cập nhập nội dung sẽ để dàng hơn và có thể hạn chế tối thiểu làm rối cho mã HTML

- Tiết kiệm rất nhiều thời gian

+ Định nghĩa kiểu CSS được lưu trong các tệp CSS bên ngoài vì vậy có thé thay đôi toàn bộ trane web bằng cách thay đổi chỉ một tệp Sử dụng CSS sẽ giúp bạn không cần thực hiện lặp lại các mô tả cho từng thành phan Từ đó, bạn có thê tiết kiệm được tối đa thời gian làm việc với nó, làm code ngắn lại siúp kiểm soát đễ đàng hơn các lỗi

không đáng có

+ CSS tạo ra nhiều style khác nhau nên có thê được áp dụng với nhiều trang web, từ

đó giảm tránh việc lặp lại các định dạng của các trang web giống nhau

- Cung cấp thêm các thuộc tính

+ C§S cung cấp các thuộc tính chi tiết hơn HTML để định nghĩa giao diện của trang

web CSS giúp người dùng nhiều styles trên một trang web HTML nên khả năng điều chỉnh trang của bạn trở nên vô hạn

2.5 Nhúng CSS và website

css

HƯỚNG DẪM

CSS CHO LINK (LIÊN KẾT}

TỰ MỌC C$%X

1.5 Nhung & website

- Dé CSS có thể thực thi trên website hoặc HTML Documents thi phải tiến hành nhúng CSS vào website Nếu không, các định dạng CSS sẽ không thực thi trên HTML

- Có 3 cach nhung CSS vao website:

+ External CSS — Tạo một tap tin css riêng và nhúng vào tài liệu HTML thông qua

cap the <link>

3 Ngôn ngữ lập trình web Javascript

- Là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng Là một

trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng

một website sông động, chuyên nghiệp, bạn có thể nhìn tổng quan

- Chương trình rat dé hoc

- Những lỗi Javascript rất đễ để phát hiện, từ đó giúp bạn sửa lỗi một cách nhanh chóng hơn

- Những trình duyệt web có thể dịch thông qua HTML mà không cần sử dụng đến mot compiler

- JS c6 thê hoạt động ở trên nhiều nền tảng và các trình duyệt web khác nhau

- Được các chuyên gia đánh giá là một loại ngôn ngữ lập trình nhẹ và nhanh hơn nhiều so với các ngôn ngữ lập trình khác

- J§ còn có thê được gắn trên một số các element hoặc những events của các trang web

- Những website có sử dung JS thi chúng sẽ giúp cho trang web đó có sự tương tác cũng như tăng thêm nhiều trải nghiệm mới cho người dùng

- Người dùng cũng có thể tận đụng JS với mục đích là để kiểm tra những input thay

vì cách kiểm tra thủ công thông qua hoạt động truy xuất database

- Giao diện của ứng dụng phong phú với nhiéu thanh phan nhu Drag and Drop, Slider

để cung cấp đến cho người ding mét Rich Interface (giao diện giảu tính năng)

- Giúp thao tác với người dùng phía ClHient và tách biệt piữa các Client với nhau

3.4 Nhược điểm

- JS Code Smippet khá lớn

- JS dé bi cac hacker va scammer khai thac hon

- J§ cũng không có khả năng đa luồng hoặc đa dạng xử lý

- Có thể được dùng để thực thi những mã độc ở trên máy tính của người sử dụng

- Những thiết bị khác nhau có thể sẽ thực hiện JS khác nhau, từ đó dẫn đến sự không đồng nhất

- VÌ tính bảo mật và an toàn nên các Client-Side Javascript sẽ không cho phép đọc

hoặc ghi các file

- JS không được hỗ trợ khi bạn sử dung 6 trong tinh trang thiết bị được kết nỗi mạng 3.5 Các công cụ được sử dụng dé phat triển JavaScript

- IDE là tên viết tắt của cả cụm Inteprated Development Environment Đây là một môi trường được tích hợp với nhiều công cụ lẫn tiện ích khác nhau IDE được đánh giá là một môi trường chuyên dụng dành cho những lập trình viên khi sử dung JS Hiện tại, những IDE đang được sử dụng rất phổ biến như sau:

- Các phần tử trong HTML có thể được coi là nhitng chiéc hép Trong CSS, thuat ngir

“mô hình hộp” được dùng để nói về việc thiết kế, dàn layout

- Về cơ bản mô hình hộp CSS là một chiếc hộp bao xung quanh phần tử HTML, gồm

lề, đường viên, padding và nội dung bên trong

5 Github

5,1, Khái niệm

1.9 Hình nền Github

- Là một hệ thông quản lý dự án và phiên bản code, hoạt động giống như một mang

xã hội cho lập trình viên Các lập trình viên có thể clone lại mã nguồn từ một repository va Github chính là một dịch vụ máy chu repository céng céng, mỗi ngudl

có thê tạo tài khoản trên đó để tạo ra các kho chứa của riêng mình để có thê làm việc 5.2 Một số thông tin về GIT

- Là công cụ giúp quản lý source code tô chức theo dạng dữ liệu phân tán

- Grup đồng bộ source code của team lên | server

- Hỗ trợ các thao tác kiểm tra source code trong quá trình làm việc (diff, check modifications, show history, merge source, .)

- GitHub duoc coi là một mạng xã hội dành cho lập trình viên lớn nhất và dễ dùng nhất với các tính năng cốt lõi như:

- Wiki, issue, thong ké, déi tén project, project duoc dat vao namespace Ia user

- Watch proJect: theo dõi hoạt động cua proJect của người khác Xem qua trinh nguo1

ta phát triển phầm mềm thế nào, project phát triển ra sao

- Follow user: theo đối hoạt động của người khác

5.3 Cách tiếp cận: Có 2 cách tiếp cận GitHub:

- Tao project cua riéng minh Contribute cho project cé san: fork project cé san cua người khác, sửa đổi, sau đó đề nghị họ cập nhật sửa đổi của mình (tao pull request) 5.4 Cong dung