Bảo mật website mã nguồn mở Linux với Mod_Security

Đối với một mã nguồn mở như hosting Linux thì việc bảo mật rất là quan trọng, vì ở đây có chứa khá nhiều lỗ hổng cho hacker lọt vào. Do vậy ngoài việc thiết kế web bảo mật, quản trị web cần sử dụng những công cụ hỗ trợ để bảo mật website của mình. Hôm nay chúng ta cùng sử dụng Mod_Security để bảo vệ website của mình.
 
Mod_security là một opensource web application firewall được Ivan Ristic phát triển dành cho Apache Web Server. Ivan Ristic là tác giả quyển sách.Ông là một người có rất nhiều kinh nghiệm trong bảo vệ Apache Web Server. Ông đã có nhiều thời gian nghiên cứu Web Application Security, Web Intrusion Detection, và Security Patterns. Trước khi chuyển sang lĩnh vực security, Ivan đã có nhiều năm làm việc như một developer, system architect, technical director trong phát triển phần mềm. Ông là người sáng lập ra công ty ThinkingStone làm các dịch vụ liên quan đến website application security.
thiet ke web bao mat
Ứng dụng tường lửa ModSecurity
 
Để cài được MOD này các bạn cần phải cài đầy đủ gói L A M P trước trên server hoặc VPS của mình nhé, sau đó chạy lệnh phù hợp với OS trên server:
## For RHEL/CentOS 6.2/6.1/6/5.8 ##
# yum install gcc make
# yum install libxml2 libxml2-devel httpd-devel pcre-devel curl-devel
## For Fedora 17,16,15,14,13,12 ##
# yum install gcc make
# yum install libxml2 libxml2-devel httpd-devel pcre-devel curl-devel

Download Mod_Securtiy và bắt đầu cài đặt.

## For RHEL/CentOS 6.2/6.1/6/5.8 ##
# cd /usr/src
# wget http://www.modsecurity.org/download/modsecurity-apache_2.6.6.tar.gz
# tar xzf modsecurity-apache_2.6.6.tar.gz
# cd modsecurity-apache_2.6.6
# ./configure # make install # cp modsecurity.conf-recommended /etc/httpd/conf.d/modsecurity.conf

## For Fedora 17,16,15,14,13,12 ##
# cd /usr/src
# wget http://www.modsecurity.org/download/modsecurity-apache_2.6.6.tar.gz
# tar xzf modsecurity-apache_2.6.6.tar.gz
# cd modsecurity-apache_2.6.6
# ./configure
# make install
# cp modsecurity.conf-recommended /etc/httpd/conf.d/modsecurity.conf

Mod security này yêu cầu cần phải có OWASP (Open Web Application Security Project) để tạo cấu hình đầu tiên, các rules này dùng để bảo vệ website của bạn khỏi các nguy cơ chưa được định nghĩa và được tìm ra trong quá trình phát triển các website và do nghiên cứu, vì thế việc cài các rules này là việc làm khá quan trọng, các bạn cài như sau:

## For RHEL/CentOS 6.2/6.1/6/5.8 ##
# cd /etc/httpd/
# wget http://pkgs.fedoraproject.org/repo/pkgs/mod_security_crs/modsecurity-crs_2.2.5.tar.gz/aaeaa1124e8efc39eeb064fb47cfc0aa/modsecurity-crs_2.2.5.tar.gz
# tar xzf modsecurity-crs_2.2.5.tar.gz
# mv modsecurity-crs_2.2.5 modsecurity-crs # cd modsecurity-crs
# cp modsecurity_crs_10_setup.conf.example modsecurity_crs_10_config.conf

## For Fedora 17,16,15,14,13,12 ##
# cd /etc/httpd/
# wget http://pkgs.fedoraproject.org/repo/pkgs/mod_security_crs/modsecurity-crs_2.2.5.tar.gz/aaeaa1124e8efc39eeb064fb47cfc0aa/modsecurity-crs_2.2.5.tar.gz
# tar xzf modsecurity-crs_2.2.5.tar.gz
# mv modsecurity-crs_2.2.5 modsecurity-crs
# cd modsecurity-crs
# cp modsecurity_crs_10_setup.conf.example modsecurity_crs_10_config.conf

Tiếp theo, bạn mở FTP lên và edit file httpd.conf theo đường dẫn:

/etc/httpd/conf/httpd.conf

Tìm tới các dòng đầy chữ load module ấy, thêm dòng này:

LoadModule security2_module modules/mod_security2.so

Tiếp theo, các bạn tụt xuống gần cuối file, thêm đoạn code load mod này vào:

 Include conf.d/modsecurity.conf

Và cuối cùng là restart lại Apache để nó nhận mod này thôi:

# /etc/init.d/httpd restart
Hoặc
service httpd restart

Kiểm tra bằng cách gọi hàm phpinfo() lên, các bạn sẽ thấy có thông báo module đã được load cùng php nhé:

thiet ke web bao mat

Hy vọng với ứng dụng này bạn sẽ thực hiện bảo mật web của mình tốt hơn. Xem thêm các hướng dẫn bảo mật web của Vivicorp.

Những công cụ nhà phát triển web cần phải có

Ngày nay, các thiết kế web có xu hướng phức tạp hơn và lớn hơn. Ngay cả những nhà phát triển dày dạn kinh nghiệm nhất cũng cần sự hỗ trợ từ một số công cụ thiết kế webvà phát triển web. Những công cụ web này giúp quá trình xây dựng website của các nhà phát triển web thuận lợi hơn.

nhung cong cu can thiet cho nha thiet ke web

Những công cụ cần thiết cho nhà phát triển web

Trong khi không có một danh sách rõ ràng, tạp chí thiết kế web đã thu thập một số công cụ được yêu thích của các nhà phát triển web. Từ các công cụ mã hóa đến thông tin liên lạc để chia sẻ tập tin và lưu trữ, kiểm tra các công cụ và phần mềm WDG được các nhà phát triển web yêu thích sử dụng.

I/ Quản lý phiên bản

Công cụ quản lý phiên bản lưu trữ lịch sử của những lần sửa đổi code, cho phép bạn kiểm tra, so sánh và hợp nhất các sự thay đổi cũng như quay trở lại phiên bản trước dễ dàng. Quản lý phiên bản cũng cho phép nhiều nhà phát triển web cùng thực hiện trên một dự án thiết kế web.

cong cu quan ly phien ban

Công cụ quản lý phiên bản

1) BeanStalk

BeanStalk là một máy chủ dành cho việc lưu trữ code. Nó cho phép các nhà phát triển web dễ dàng cộng tác với đội nhóm của mình thông qua Git, lưu nó vào một vị trí từ xa và sau đó gửi mã tự động đến các nhà phát triển khác hoặc máy chủ sản xuất. Thêm một lợi ích khác là khả năng có một cái nhìn tổng quan về hoạt động của các người dùng liên quan.

2) SourceTree

Đây là một công cụ miễn phí cho cả Windows và Mac, cung cấp cho bạn một giao diện đồ họa sẽ giúp bạn yêu thích việc quản lý phiên bản.

3) GitHub

Git cho phép đội ngũ nhóm cùng xem và quản lý mã. Đó là nơi chúng ta đặt tất cả mã chung. Bằng cách đó, chúng ta có thể hợp tác với tất cả các thành viên trong nhóm.

II/ Công cụ Command Line

Khi bạn cần thực hiện một cái gì đó nhanh chóng và hiệu quả mà không cần có một giao diện đồ họa, các command line là điều bạn cần.

cong cu Command Line

Công cụ Command Line

1) Drush

Một giao diện shell tuyệt vời mà các nhà phát triển Drupal không thể thiếu, giúp tự động hóa các nhiệm vụ Drush Drupal trực tiếp từ command line.

2) WP-CLI

Tương tự như Drush, đây là một tập hợp các công cụ command line cho phép bạn các lệnh WordPress và giao diện với các nền tảng thông qua command line.

III/ Công cụ soạn thảo code

Bất kể nhà phát triển web đang làm việc với ngôn ngữ nào thì đều phải làm việc liên tục với code, điều quan trọng là phải có một trình soạn thảo code với một UI thân thiện, các phím tắt và sự linh hoạt để làm việc theo cách của bạn.

cong cu soan thao code

Công cụ soạn thảo code

1) Sublime Text

Kết hợp một trình soạn thảo tinh vi để code bao gồm khả năng để thực hiện chỉnh sửa hàng loạt với việc chỉnh sửa các dòng code đa dạng.

2) Coda

Một công cụ web tất cả trong một dành cho người dùng Mac. Nó bao gồm một FTP client, trình soạn thảo code và truy cập terminal, với các tính năng tuyệt vời của nó.

IV/ Môi trường phát triển ảo

Lưu trữ các dự án tại địa phương sẽ cho phép bạn thử nghiệm và thử nghiệm mà không ghi đè lên các tập tin được chia sẻ, trong khi ảo hóa cho phép bạn mô phỏng các kinh nghiệm của các nền tảng điều hành và các trình duyệt khác nhau.

cong cu moi truong ao

Công cụ môi trường phát triển ảo

1) Vagrant

Một công cụ mã nguồn mở phổ biến cho việc xây dựng và quản lý môi trường phát triển ảo của bạn.

2) ExpanDrive

Bản chất là một lưu trữ đám mây cho mọi ứng dụng. ExpanDrive hoạt động như một ổ USB nhưng là một ổ đĩa ảo cho Amazon S3 và kết nối FTP/SFTP.

3) MAMP Pro

Tương tự như Vagrant, MAMP Pro là một công cụ cần thiết cho việc phát triển cục bộ trên một MAC. Nó cung cấp nền tảng Mysql, Apache PHP để tích hợp trực tiếp vào OS X.

V/ Debugging và Testing trình duyệt

Với sự kết hợp dường như vô tận của các trình duyệt web hiện tại và kế thừa cho người dùng lựa chọn, đó là trách nhiệm của các nhà phát triển web để bảo đảm thực hiện thành công của trang web chúng ta xây dựng. Trong khi nó có vẻ hầu như không thể kiểm tra trên tất cả các kích thước màn hình trình duyệt và những công cụ này sẽ giúp làm cho công việc dễ dàng hơn.

Xem thêm: 8 công cụ Debug PHP tốt nhất dành cho nhà phát triển web

cong cu Debugging

Công cụ Debugging và testing trình duyệt

1) BrowserStack

Vừa an toàn vừa thông minh, BrowserStack là công cụ testing trực tiếp trên nền web nhanh chóng với tất cả các trình duyệt máy tính để bàn, máy tính bảng và điện thoại di động.

2) Chrome Developer Tools

Một công cụ quản trị web và gỡ lỗi các công cụ được tích hợp trực tiếp vào Chrome.

3) Web Developer’s Tools For Firefox  

Một công cụ của Firefox plugin giúp đẩy nhanh quá trình phát triển. Với công cụ dành cho nhà phát triển web này, họ có thể khắc phục sự cố, sửa lỗi và chỉnh sửa mã mà không cần rời khỏi Firefox.

VI/ Đánh giá hiệu suất máy chủ

Với bất kỳ trang web, công cụ này rất hữu ích để nắm được các vấn đề có thể xảy ra. Công cụ đánh giá hiệu quả máy chủ được sử dụng để giúp bạn tránh bị ẩn và đánh giá các nguồn lực và cơ sở hạ tầng của bạn.

cong cu danh gia hieu suat may chu

Công cụ đánh giá hiệu suất máy chủ

New Relic  

Đây là công cụ đánh giá hiệu suất máy chủ tuyệt vời và phân tích hiệu suất từ trình duyệt đến cơ sở dữ liệu.

Trên đây là một số công cụ web mà rất cần thiết cho nhà phát triển web. Nếu bạn có một số công cụ hữu ích khác. Hãy chia sẻ ở bình luận bên dưới nhé.

6 kinh nghiệm học lập trình web hiệu quả

Bạn đang mê lập trình web, mong muốn khám phá những dòng code hoàn hảo nhưng phương pháp học không đúng cách dễ dàng khiến bạn nản lòng cũng như không “lên tay”. Vậy hôm nay Dữ liệu web Tạp Chí Web xin chia sẻ với các coder 6 kinh nghiệm giúp học lập trình web hiệu quả hơn.

Đối với việc học thì mỗi người đều có một phương pháp học riêng phù hợp với điều kiện cũng như tính cách của từng người. Tuy nhiên, trên một số phương diện, cách thức học của bạn cũng nên đảm bảo các yêu cầu khách quan để việc nghiên cứu, học tập trở nên dễ dàng và hiệu quả hơn.

Dưới đây là 6 kinh nghiệm giúp bạn học  thiết kế web tốt hơn.

1. Đừng copy và Paste code

Đây có lẽ là lời khuyên được nhiều người nói nhất và đúng nhất. Ban đầu khi mới làm quen với một ngôn ngữ lập trình nhìn mớ code như mớ bòng bong chấm phẩy tè le hết. Ngồi gõ lại thì lâu biết bao nhiêu, copy và paste cho nhanh. Nhưng chỉ bằng cách gõ lại bạn mới nhớ code hơn, nếu có gõ sai thì có cơ hội quay lại và chỉnh sửa lỗi của mình. Tuy các hướng dẫn đều có source code để bạn tham khảo, nhưng bạn chỉ lấy đó làm mẫu thôi còn bạn vẫn phải tự gõ lại những gì bạn thấy.

2. Vừa xem vừa làm

Bạn đừng có mở video lên, pha ly cà phê rồi ngồi vuốt râu khen “phải! phải!”. Cách đó thực sự không hiểu quả cho lắm. Khi vừa xem video bạn vừa thấy có lý, nhưng khi tắt video đi thì lại mơ hồ không rõ lắm. Chính vì thế bạn mở video một bên và cửa sổ code một bên. Xem đến đâu gõ đến đó thì hiệu quả hơn rất nhiều

3. Tự làm sau khi xem

Đây có lẽ là cách hiệu quả nhất. Sau khi bạn xem video rồi, làm theo rồi, hiểu cách rồi. Hãy tắt video đi và tự làm lại từ đầu theo cách hiểu của mình. Sau đó tự sửa lỗi, tìm lỗi sai, khắc phục .v.v. nếu bế tắc thì mới xem lại video. Nếu bạn đã đào sâu suy nghĩ mà vẫn chưa ra cách, đến khi xem lại bạn sẽ nhớ lâu hơn rất nhiều

4. Code, code nữa, code mãi

Cách học code nhanh nhất là cứ bỏ mấy cuốn sách dầy cộm xuống. Mở trình soạn code lên và code. Sai thì sửa, quên thì xem lại, có lỗi tìm cách khắc phục, đào sâu suy nghĩ, Google, đọc lại lý thuyết …

Bởi vì học lập trình là môn học cần tư duy độc lập và tìm tòi sáng tạo. Rất nhiều người khi mới bắt đầu gặp vấn đề hơi khó là phải hỏi đầu tiên mà không tự khám phá. Nếu cứ mãi hỏi như vậy bạn sẽ bị ì sức sáng tạo và tư duy không độc lập nữa.

5. Tự thêm thử thách

Ví dụ bạn xem một tutorial về cách gửi mail bằng PHP. Trong video có hướng dẫn gửi mail nhưng không gửi file đính kèm. Bạn hãy cho đấy là bài tập về nhà của mình và tự tìm cách khắc phục.

Khi đọc một bài về jQuery Slider chẳng hạn, nếu người ta chỉ có chuyển hình kiểu chạy qua, hãy tự tìm cách tạo cho nó fade qua, vòng lại .v.v.. bằng cách tự tạo ra thách thức cho mình bạn sẽ tiến bộ mau hơn.

6. Học từ nhiều nguồn, nhiều tài liệu

Học làm web không như học phổ thông, không như làm toán cứ ráp công thức vô là giải được bài. Làm web mỗi người một cách làm, mỗi sách có những điểm hay điểm dở khác nhau, mỗi thầy giáo có chỗ mạnh chỗ yếu và mỗi trang web cũng có những điểm ưu điểm khuyết. Do vậy bạn nên tập hợp nhiều nguồn sách, video, ebook, trang web, tutorials v.v.. rồi đúc kết, chắt lọc ra cách mà bạn cho là tối ưu nhất. Hãy kết hợp nhiều nguồn với nhau và tìm ra cách nào mình thấy dung hòa được tất cả các mặt.

Kết luận

Trên đây chỉ là một số kinh nghiệm học lập trình web đơn giản, bạn có thể thấy nó có đôi chút không phù hợp với mình. Không sao, quan trọng của học lập trình web là bạn phải tạo ra cho mình một thói quen tư duy độc lập. Chúc bạn thành công và sớm trở thành một coder pro trong tương lai.

Xem thêm: Trở thành Web Designer dễ dàng hơn với 12 ebook hoàn toàn miễn phí

Sai lầm của admin trong công cuộc bảo mật thiết kế web

Trong khi hacker ngày càng tinh vi thì admin – người đóng vai trò quản trị website lại còn khá mơ hồ và lơ là trong công cuộc thiết kế bảo mật web. Ngay bây giờ, các admin hãy thức tỉnh và nhận thức được trách nhiệm của mình trong công cuộc bảo mật thiết kế web. 
Hiện nay trường hợp website bị đánh cắp hầu như xảy ra rất phổ biến. Một phần là do hacker quá tinh vi, nhưng một phần cũng nằm ở trách nhiệm của admin. Có thể một chút lơ là, không cẩn thận, admin có thể đẩy website vào tình trạng báo động đỏ.

Dưới đây 6 sai lầm mà admin hay mắc phải trong việc bảo mật thiết kế web. Hy vọng các admin sẽ thức tỉnh và nhận thấy được vai trò của mình trong việc bảo mật web.

1. Đặt password khá đơn giản

Cách đặt password của các admin khá đơn giản, hacker có thể lợi dụng để đột nhập vào lấy cắp thông tin dữ liệu. Các password thường gặp có thể là: admin, 123456, là domain của site, username, phone, pass db, ngày tháng năm sinh, v.v…

thiet ke web bao mat
Mật khẩu đơn giản, hiểm họa khôn lường
 

Ở đây gọi là kỹ thuật đoán password, một kỹ thuật tưởng là khó thành công nhưng đôi lúc cũng khá tốt. Nếu các bạn có kinh nghiệm hacking khi xem username + password database thì chắc có lẽ sẽ bất ngờ vì password.

Cách giải quyết là các admin hãy đặt các mật khẩu có ký tự đặc biệt, nếu việc nhớ những mật khẩu này khó khăn, hãy sử dụng các ứng dụng quản lý password chẳng hạn như Lastpass.
2. Không xóa các file nhạy cảm có chứa thông tin liên quan đến password

Các admin thường sơ xuất không xóa đi một số file nhạy cảm như: mysqldumper, bigdump,zip, databackup.php, unzip.php, caidat.php, zipcode.php hay có thể là tên của của chính website. Hacker có thể đoán và thử xem các file đó có tồn tại hay không?.

Dựa vào các file đó, hacker có thể xâm nhập vào trang quản trị, Cpanel hoặc ftp của bạn là điều không gì dễ hơn thế nữa.

3. Sử dụng cùng 1 username + password cho tất cả dịch vụ

Việc này do admin thiếu kinh nghiệm đặt password diễn đàn trùng với password mail, hay password login vào cpanel dẫn đến việc dễ bị hack.

Đây là 1 kỹ thuật khá hay, trước khi hack 1 site nào đó, hacker có thể tìm kiếm những thông tin về admin của victim, tìm xem admin này thường hay ra vào forum, blog nào, cố gắng hack 1 trong các site mà admin đó thường lui tới để có được password của admin, việc cuối cùng là crack password, thử xem admin có thiếu kinh nghiệm đến mức đặt password chung không.

Nói ra thì dài dòng, nhưng các hacker có mặt trên các khắp diễn đàn, nên bạn an tâm việc hacker có vui lòng hack website của bạn hay không mà thôi (đừng để mình thành nạn nhân vì những việc này).

4. Phishing:

Hacker thường làm là send cho victim (nạn nhân ) 1 con keylogger (thường là gởi qua mail hay send link qua Y!M), rồi ngồi chờ thôi. Tất nhiên có nhiều biến tướng từ Phishing: fake login…, nhớ là phòng hơn chống.

Xem thêm: Cẩn thận hình thức tấn công giả mạo ăn cắp mật khẩu Gmail

thiet ke web bao mat
Hình thức phishing
 

5. Social engineer

Nhắc đến social thì mọi người thường nhắc đến Kevin Mitnick. Thực ra cái này cũng không phải là kỹ thuật cao siêu gì, vấn đề là tạo được lòng tin từ victim để từ đó khai thác.

Có thể ví dụ như sau: thường thông qua lỗi sql injection được username + password, nhưng công việc khó khăn nhất là tìm link login, một cách social là contact nhân viên support cung cấp site đó, bảo site đó bị hack, login vào trang quản lý nhưng không được, “username + password của tôi nè, please help me!!!!!!”

6. Sử dụng open source, source share trên mạng

Chúng ta vì sợ tốn tiền, chọn đại một open source nào đó đẹp đẹp trên mạng về sử dụng, nhưng họ đâu biết rằng chính source đó là mồi nhử của các hacker, thế là thêm 01 con mồi bị sập bẫy.

Do vậy, nếu bạn sử dụng mã nguồn mở hãy đọc bài này: Tổng hợp 10 lưu ý bảo mật đối với website sử dụng shared hosting linux
thiet ke web bao mat
Sử dụng mã nguồn mở không an toàn trong thiết kế website
 
Chắc chắn công việc bảo mật web là không hề dễ dàng. Nó đòi hỏi một thiết kế bảo mật web, các công cụ phòng chống hack, và cũng cần trách nhiệm, vai trò của cả admin. Dù sao đi nữa, các admin nên cẩn thận hơn, các bạn đừng để những lỗi ngớ ngẩn như trên làm chết website của mình nhé.

10 sai lầm có thể giết chết thiết kế website của bạn

Thiết kế web là một quá trình phức tạp, đòi hỏi nhiều yêu cầu về lập trình, thiết kế mỹ thuật…và nếu không cẩn thận bạn có thể mắc phải những sai lầm đáng tiếc. Vivicorp xin chia sẻ 10 sai lầm có thể giết chết website của bạn và lời khuyên đi kèm.
sai lam giet chet thiet ke web
10 sai lầm có thể giết chết thiết kế web của bạn
 
Theo xu hướng, yêu cầu mỗi doanh nghiệp đều có một website là điều tất yếu. Tuy nhiên, vì chỉ chạy theo xu hướng mà không đầu tư kỹ lưỡng, có thể khiến website của bạn chẳng những không giúp kết quả kinh doanh tốt hơn mà còn làm cho hình ảnh thương hiệu tệ đi trong mắt người dùng trực tuyến. Sử dụng những công cụ thiết kế web tồi, mỹ thuật web lộn xộn, nội dung không hữu ích người dùng…là một trong những sai lầm giết chết website của bạn.


1. Điều hướng của thiết kế web rắc rối người dùng

Trang web bố trí menu không hiệu quả sẽ không gây được hiệu ứng cho người xem, thậm chí là khiến người xem hoang mang và tức giận. Thiết kế web bố trí menu phải:
– Phân dạng menu: khi thiết lập dự án thiết kế web, bạn cần phân dạng các menu thông tin theo nhóm tương đồng.
– Vị trí đặt menu: Bên trên, bên trái, bên phải,… Sao cho hài hòa với các thông tin dự án thiết kế web

Ngoài ra còn tên menu ngắn gọn, di chuyển thông tin sao dễ nhất, đánh dấu bạn đang xem gì ,..

Xem thêm: 20 thiết kế menu navigation độc đáo


2. Nội dung thiết kế web sử dụng đoạn văn dài, lộn xộn

Để tiếp thị trực tuyến cũng như quảng bá web thành công, bạn lưu ý thiết kế nội dung trang web sao cho người dùng cảm thấy thoải mái, nhanh chóng:

– Đoạn văn ngắn gọn:
nội dung một đoạn dài người dùng không đọc được


– Bố cục khoa học:
kết cấu lung tung không liên kết nội dung với nhau.

Xem thêm: Nghệ thuật xây dựng nội dung để thu hút người đọc mục tiêu


3. Màu sắc thiết kế web quá rối mắt

Một điều quan trọng nhất khi thiết kế website mà bạn luôn phải nhớ đó là giữ nó thật đơn giản. Càng rườm rà rắc rối càng không cần thiết. Trang web của bạn không nên nhiều hơn 3 màu và chữ trong bài viết nên là màu có tính tương phản cao với nền.

Không còn gì bực mình hơn khi phải đọc chữ màu vàng trên nền màu hồng, hoặc chữ màu cam trên nền màu xanh lá cây. Có thể theo bạn là rất đẹp nhưng với độc giả thì lại là một vấn đề khác và thường là khó chịu.

 

4. Font chữ và màu sắc lộn xộn khi thiết kế web

Khi thiết kế web lưu ý font chữ dùng trên các trang web. Thiết kế web chuyên nghiệp quan trọng nhất là bố trí font chữ. Bí quyết để sử dụng font chữ và màu sắc hợp lý là:


– Đồng nhất font : trong thiết kế web quy ước kiểu font, kích cỡ font thống nhất như một cuốn sách xuyên suốt.


– Nổi bật tiêu đề: Tiêu đề nội dung trên trang web bố trí nổi bật hơn về kích cỡ, kiểu, màu sắc… nhưng mang tính thống nhất.


Xem thêm: 3 bí quyết giúp lựa chọn font chữ cho website

 
font chu va mau sac lon xon trong thiet ke web
Font chữ và màu sắc của website quá rắc rối
 

5. Thiết kế web sử dụng font chữ chạy nhảy

Thẻ marquee là một tính năng rất thú vị, nhưng có nhiều người lại lạm dụng nó. Mặc dù ý tưởng dùng chữ marquee là khá hay và hấp dẫn, nhưng bạn nên nhớ rằng không phải ai cũng thấy cách này là một cách hay đâu.
Nếu bạn quyết định dùng marquee, thì bạn phải xác định rõ ràng là nó có thực sự mang lại hiệu quả và tăng thêm sức hấp dẫn cho site của bạn hay không. Có một vài trường hợp dùng marquee khá là hiệu quả như thông báo thông tin mới, thông tin nóng nhưng có nhiều trường hợp marquee text làm người đọc thấy khó chịu.


6. Không thể tìm thấy trang liên hệ trên thiết kế web

Đừng để độc giả của bạn phải tìm thông tin liên lạc, đặc biệt nếu site của bạn về bán hàng hóa online. Bạn nên để thông tin liên lạc ở mỗi trang.
Nếu thông tin liên lạc của bạn khó có thể tìm thấy hoặc không có thì làm cho khách hàng không muốn buôn bán gì với bạn hết.
Tuy nhiên nếu website của bạn có diễn đàn hoặc một cái gì gần như thế thì thông tin liên lạc lại không thực sự quan trọng. Vì khách hàng có thể liên lạc trực tiếp với bạn qua diễn đàn, sổ lưu bút …
 

7. Tốc độ tải trang thiết kế web quá lâu

Nếu trang của bạn không được load dưới 10 giây, thì file HTML của bạn là quá lớn. Bạn hãy kiểm tra lại những hình đồ họa của mình. Liệu bạn sử dụng nhiều hình ảnh quá không? nó có cần phải định lại dung lượng không?
toc do tai trang thiet ke web cham
Không những giảm trải nghiệm người dùng mà website tải lâu có thể bị Google đánh giá xấu
 
Người ta hay quen dùng định dạng .JPG cho những file hình nhiều màu sắc và định dạng .GIFcho những hình đặc hoặc đơn màu. Bạn cũng nên nhớ định dạng độ cao, chiều rộng cho bảng trong khi thiết kế với HTML bởi vì chữ sẽ được load trước hình ảnh. Những hình GIF động làm giảm đáng kể tốc độ load của site.
 
 
8. Không có META tag trong thiết kế web

Meta tag là một dạng code ẩn, người đọc không thấy nó hiện trên trình duyệt nhưng nó lại được nhìn thấy bởi những Search Engine( máy tìm kiếm google.com). Bạn muốn từ khóa web nâng cao trên máy tìm kiếm thì nên tuân thủ SEO để quảng cáo google.

9. Sử dụng frame trong thiết kế web

Frame có thể tạo ra rất nhiều phiền toái cho bạn. Nhiều  Search Engine không index những trang dùng frame, frame đôi khi không cho phép người đọc bookmark site của bạn và nó gây khó khăn khi in ấn.


10. Chọn độ phân giải không phù hợp

Hiện nay đa phần người lướt web dùng màn hình với độ phân giải là 800×600. Nếu bạn thiết kế trang web để phù hợp với độ phân giải là 1024×768 Px hoặc cao hơn, thì bạn phải nhớ rằng rất nhiều người phải kéo thanh cuộn ngang để xem thông tin.
Tuy nhiên hiện nay những màn hình 1024×768 đang dần trở nên thịnh hành và bạn cũng không nên quá lo lắng nữa.
do phan giai thiet ke web khong phu hop
Những sai lầm trong thiết kế web làm khách hàng đánh giá thấp website của bạn
 
Bí quyết để giải quyết vấn đề này là bạn nên định dạng bảng bằng chế độ phần trăm thay vì pixel. Ví dụ khi bạn định dạng bảng là 100% width thay vì “800” thì khi màn hình là 800 hay 1024 nó vẫn hiện đầy đủ hết.
Hy vọng với những thông tin về sai lầm cũng như bí quyết thiết kế web trên, bạn sẽ có thể tạo ra một thiết kế web hoàn hảo hỗ trợ tối đa kinh doanh và quảng bá hình ảnh thương hiệu công ty đến người dùng. Nếu có bất kỳ thắc mắc và nhu cầu tư vấn hãy liên hệ với thiết kế web Vivicorp để được giải đáp tận tình.

5 tiện ích web Chrome giúp bảo mật tối đa

Giữa vô ngàn mối nguy hiểm từ internet, thông tin cá nhân của bạn dễ bị hacker và virus tấn công. 5 tiện ích mở rộng của Chrome dưới đây sẽ giúp bạn bảo mật các thông tin tốt hơn khi duyệt các thiết kế web trên internet.
Chrome là một trình duyệt có khả năng bảo mật web cao cùng với các tiện ích mở rộng bảo mật này sẽ giúp bạn phát huy tối đa công cuộc bảo mật các thông tin cá nhân của mình khi duyệt các thiết kế web trên internet.

1) Personal Blocklist

thiet ke web bao mat tien ich chrome personal
Extension chặn các website cụ thể trong kết quả tìm kiếm

Personal Blocklist là Extension này sẽ giúp bạn chặn các website cụ thể hoặc các tên miền xuất hiện trong kết quả tìm kiếm của bạn. Khi bạn khóa hoặc mở khóa thì các địa chỉ web hoặc tên miền này sẽ lập tức không xuất hiện trong các kết quả tìm kiếm nữa, giúp bạn không bị phân tâm bởi các địa chỉ này.

2) Click&Clean 

thiet ke web bao mat tien ich chrome click&clean
Click&Clean dễ sử dụng
Đây là một extension dễ sử dụng, có chức năng giống như một phần mềm dọn rác hệ thống. Extension này sẽ giúp bạn bảo mật hoặc giữ các thông tin cá nhân, lịch sử duyệt web từ các bên theo dõi và thu thập thông tin.

Các chức năng chính của Click&Clean: Quét malware trên máy tính, xóa các file tạm, xóa lịch sử duyệt web, dọn dẹp cookie và bộ nhớ đệm,…

3) Web Of Trust (WOT)

Web Of Trust là một extension giúp bạn kiểm tra xem một địa chỉ web có an toàn không dựa trên các phản hồi đánh giá của người dùng khác. Ở đây có 3 mức độ chủ yếu : xanh – an toàn, vàng – nghi ngờ hoặc chưa chắc chắn, đỏ – nguy hiểm.

thiet ke web bao mat tien ich chrome WOT
Kiểm tra độ an toàn của liên kết thông qua màu sắc

Để sử dụng extension này thì bạn cần phải đăng ký một tài khoản, việc tạo tài khoản rất nhanh chóng và hoàn toàn miễn phí.

4) HTTPS Everywhere

 
thiet ke web bao mat tien ich chrome HTTPS
Tiện ích bảo mật tối đa thông tin cá nhân
 

HTTPS Everywhere là một extension quan trọng nếu bạn quan tâm tới tính bảo mật thông tin của mình. Extension này sẽ mã hóa thông tin khi bạn truy cập vào các trang web, khiến trình duyệt Chrome trở nên an toàn hơn nhiều bằng việc tự động chuyển giao thức “HTTP” thành “HTTPS”.

5) Script Defender

thiet ke web bao mat tien ich chrome Script

Script Defender là một extension cho phép bạn chặn các đoạn mã, plugin bạn không thích và các thành phần gây khó chịu khác của website. Việc ngăn chặn này sẽ giúp bảo mật máy tính của bạn, an toàn trước các adware độc hại.

Hy vọng 5 tiện ích này sẽ có ích cho bạn trong việc bảo mật và truy cập các thiết kế website nhiều mã nguồn độc hoặc chứa các virus trên internet.

20 bước sở hữu một layout thiết kế web hoàn hảo (phần 1)

Layout web đóng vai trò quan trọng trong giao diện thiết kế web và ảnh hưởng nhiều đến người truy cập trong quá trình tương tác website. Hôm nay, Vivicorp sẽ cung cấp một tài liệu thiết kế web hướng dẫn các bước tạo ra một layout web từ đầu đến cuối.

Khi tiếp cận các chủ đề về thiết kế layout web, các nhà thiết kế web mới hoặc thực tập sinh có thể mắc nhiều sai lầm. Trong danh sách ngắn gọn này, các bước hướng dẫn thiết kế web sẽ giúp cho nhà thiết kế web nhắm đến đúng những công việc cần phải làm, liên quan đến các kỹ thuật và mỹ thuật, để có thể bắt đầu một dự án mới thành công và hiệu quả hơn.

Những nguyên tắc này không chỉ bao gồm khía cạnh thiết kế trang đích mà còn thể hiện độc đáo các trang chung trên thiết kế web. Đi theo các hướng dẫn này, bạn sẽ tạo ra một web layout chuyên nghiệp hơn.

1) Thể hiện ý tưởng của bạn lên giấy

ban phac thao tren giay

Bản phác thảo trên giấy ban đầu rất quan trọng khi thiết kế bố cục hoàn hảo

Điều này có vẻ hiển nhiên, tuy nhiên có một số nhà thiết kế web thường xuyên nhảy thẳng vào Photoshop trước khi đưa ra các vấn đề mà họ đang cố giải quyết. Thiết kế là giải quyết vấn đề và những vấn đề không thể được giải quyết thông qua gradient hoặc shadows mà phải thông qua một bố cục tối và hệ thống phân cấp rõ ràng. Hãy suy nghĩ về nội dung, bố cục và các chức năng trên giấy trước khi bắt đầu thực hiện các shadows.

2) Bắt đầu phác hoạ các framework cấp cao nhất

giup giai quyet van de ux

Phác thảo một dây cơ bản sẽ giúp bạn giải quyết vấn đề UX và cơ cấu về bố cục

Khi nghĩ về cái nhìn và cảm nhận cho một dự án web, điều đầu tiên cần phải làm là thực hiện một framework ở cấp độ cao nhất để có thể giải quyết tất cả các vấn đề thiết kế. Framework là một UI mà bao quanh nội dung và giúp thực hiện các hành động và điều hướng. Nó bao gồm các menu và các thành phần như sidebars và thành công cụ bên dưới.

Nếu bạn tiếp cận thiết kế web của bạn từ góc độ này, bạn sẽ có một hiểu biết rõ ràng về những nhu cầu bố cục sẽ được tạo thành khi thiết kế các khu vực bên ngoài trang chủ.

3) Thêm một grid vào PSD của bạn

mot vi du ve Grid 978

Một ví dụ về Grid 978 với cơ sở 10px

Trước khi thực hiện thiết kế bất cứ điều gì trong Photoshop, bạn cần một grid thích hợp để bắt đầu. Không có lý do hợp lệ để bắt đầu mà không có một grid và nếu bạn không có, bằng cách này hay cách khác, tôi đảm bảo thiết kế của bạn sẽ không thể nào nhìn tốt được.

Một grid sẽ giúp bạn cấu trúc bố cục của các khu vực khác nhau, nó sẽ hướng dẫn bạn thông qua các yêu cầu kích thước màn hình đặc trưng, và giúp bạn tạo ra các template thích ứng, để phù hợp với các khoảng cách cũng như các vấn đề thiết kế khác.

4) Chọn phông chữ typography

mot quy luat khong duoc su dung 2 co chu

Một quy luật chung là không được sử dụng quá hai kiểu chữ khác nhau trong một bố cục trang chủ

Typography là một xu hướng thiết kế web nổi trội trong năm 2014. Tìm hiểu  những kiểu chữ và máu sắc khau nhau là một phần của giai đoạn khám phá trong một dự án thiết kế web. Một quy luật chung là bạn không được sử dụng nhiều hơn hai kiểu chữ khác nhau trong một thiết kế web, tuy nhiên nó cũng phụ thuộc vào bản chất của website, bạn có thể sử dụng nhiều hơn hoặc ít hơn. Tất nhiên là phải thật tinh tế và khéo léo.

Tổng thể hãy chọn một phông chữ là dễ dàng để đọc cho một đoạn văn bản dài và nhiều hơn là sự vui tươi, sinh động cho tiêu đề và call to action. Đừng ngại sử dụng phông chữ lớn, vui tươi và phù hợp khi sử dụng typography.

Xem thêm: 5 giao diện web có kết hợp font chữ headline và body tuyệt vời

5) Lựa chọn chủ đề màu sắc cho trang web

su dung han che mau sac

Sử dụng hạn chế màu sắc để tránh quá tải hình ảnh

Trong suốt quá trình lựa chọn một tập hợp các kiểu chữ để sử dụng, bạn nên bắt đầu khám phá những màu sắc mà bạn sẽ sử dụng trong giao diện web, hình nền, và văn bản. Về màu sắc, tôi khuyên bạn nên sử dụng hạn chế một số màu sắc và tông màu cho giao diện người dùng chung.

Điều quan trọng là phải áp dụng một cách nhất quán trên các giao diện người dùng tùy thuộc vào chức năng của phần tử. Hãy suy nghĩ về cách bố trí màu sắc của các trang web như Facebook, Twitter, Quora, và Vimeo.

6) Chia bố cục

cau truc cang don gian nguoi dung cang de dieu huong

Cấu trúc trang web càng đơn giản thì người dùng càng điều hướng dễ dàng

Mỗi khu vực trên trang web cần thực hiện một chức năng kể chuyện riêng. Nó cần có một lý do và kết quả đối với người dùng. Cách bố trí cần thiết để giúp các nội dung nêu bật những phần quan trọng nhất trong câu chuyện đó là gì. Trong thực tế không nên có quá nhiều lời kêu gọi trên một trang, vì vậy tất cả mọi thứ nên tập trung vào điều đó cuối cùng “Tôi có thể làm gì ở đây”.

Hãy suy nghĩ về cách bố trí web đơn giản nhất mà bạn có thể tưởng tượng cho một mục đích đơn giản và bắt đầu thêm các thành phần cần thiết. Cuối cùng bạn có thể ngạc nhiên vì đã tạo ra một web layout đơn giản.

7) Suy nghĩ lại về những việc đã thiết lập

xem xet lai nhung gi da thiet lap

Hãy xem xét lại những gì đã thiết lập

Là một nhà thiết kế web, chúng ta thường hình dung về cách mà người dùng sử dụng internet, và thao tác trên internet. Điều này sẽ giúp chúng ta quyết định có bao nhiêu bước hành động đơn giản, hiệu quả mà trang có thể có. Có thể sử dụng các mô hình và công ước thiết kế có sẵn nhưng cần phải dành thời gian đánh giá và suy nghĩ về hiệu quả của chúng.  Điều quan trọng là phải xem xét lại các mô hình tương tác được thiết lập trên bất cứ thành phần và xem làm thế nào chúng ta có thể cải thiện chúng.

8) Thách thức chính mình

Tôi khuyến khích tất cả các nhà thiết kế web phải luôn thách thức chính mình trên tất cả các dự án. Sự đổi mới không phải lúc nào cũng là một yêu cầu đối với dự án, do đó hãy thể hiện chúng tương tác hoặc thiết kế liên quan. Ví dụ về các thách thức khác nhau có thể sử dụng bao gồm một hệ thống lưới điện mới, tạo ra một thành phần mới, hoặc thậm chí thách thức nhỏ như không sử dụng các chế độ màu pha trộn hoặc sử dụng một màu sắc cụ thể.

9) Chú ý đến mọi chi tiết

chu y den tung chi tiet ma minh tao ra

Chú ý đến từng chi tiết trên bố cục mà mình đã tạo ra

Câu nói có vẻ quen thuộc nhưng không phải nhà thiết kế nào cũng thực hiện. Tuỳ thuộc vào mỗi concept đằng sau của dự an web, bạn có thể triển khai chúng theo nhiều cách khác nhau.

Hãy chú ý đến mọi tương tác nhỏ, một yếu tố animation hay một gradient nhỏ trong một nút hoặc các các phụ đề tinh tế bao quanh một hộp trên background. Nhìn chung, cảm ứng này là cần thiết và cũng rất tự nhiên nếu bạn thực sự thích những gì mình làm ra.

10) Hãy quan tâm đến mọi yếu tố trên bố cục như thể nó được thực hiện trong một cuộc thi thiết kế

chu y den moi thanh phan bo cuc

Đặt chú ý đến mọi thành phần, và toàn bộ tổng thể của chúng

Mỗi thành phần cần được thiết kế như thể nó có thể đứng một mình, là một thành phần tốt hơn bao giờ hết. Đôi khi các nhà thiết kế để lại một số phần của trang để thực hiện cuối cùng trong danh sách cần làm và đặt rất ít chú tâm và công sức đối với chúng.

Xem thêm:5 lời khuyên cho nhà phát triển giao diện web

Xem tiếp 20 bước sở hữu một layout thiết kế web hoàn hảo (phần 2)

5 Front-end Frameworks phổ biến nhất năm 2014

Ngày nay, có rất nhiều Front-end Frameworks CSS được phát triển và đưa vào sử dụng. Nhưng số lượng những framework thực sự tốt chỉ đếm được trên đầu ngón tay. Hôm nay, công cụ thiết kế web xin chia sẻ 5 framework mà chúng tôi nghĩ rằng nó là tốt nhất hiện nay.

Mỗi framework có những thế mạnh và điểm yếu riêng của mình, và phù hợp với từng khu vực riêng biệt của ứng dụng, cho phép bạn lựa chọn dựa trên các nhu cầu của một dự án web cụ thể. Chẳng hạn như nếu dự án web của bạn là đơn giản, thì không có nhu cầu sử dụng một framework phức tạp. Ngoài ra, rất nhiều các tùy chọn là mô-đun, cho phép bạn chỉ sử dụng các thành phần bạn cần, hoặc thậm chí trộn các thành phần từ các framework khác nhau.

 

Xem thêm: 7 PHP framework hay và thông dụng trong thiết kế web

Các khuôn khổ mà chúng ta sẽ khám phá được giới thiệu dựa trên mức độ nổi tiếng GitHub của nó, bắt đầu với framework phổ biến nhất tất nhiên là Bootstrap.

1) Bootstrap

Bootstrap là các framework tiên phong không thể tranh cãi hiện nay. Không chỉ có tính phổ biến rất lớn, mà còn đang phát triển mỗi ngày, bạn có thể chắc chắn rằng bộ công cụ thiết kế framework tuyệt vời này sẽ không làm bạn thất vọng, hoặc để hướng bạn trên một con đường xây dựng trang thiết kế web thành công.

cong cu framework Boostrap

Công cụ framework Boostrap

– Tác giả: Mark Otto và Jacob Thornton .

– Phát hành: 2011

– Phiên bản hiện tại: 3.3.1

– Độ nổi tiếng : 75,000+ sao trên GitHub

– Mô tả: “Bootstrap là  framework HTML, CSS, và JavaScript phổ biến nhất dành cho các dự án thiết kế web và phát triển tính đáp ứng, các dự án thiết kế web mobile đầu tiên.”

– Khái niệm cốt lõi / nguyên tắc: Thiết kế web thích ứng và điện thoại di động đầu tiên.

– Kích thước framework: 145 KB

– Bộ xử lý: Less và Sass

– Tính thích ứng:  Có

– Modular: Có

– Bắt đầu từ templates / layouts: Có

– Biểu tượng thiết lập: bộ Glyphicons Halflings

– Extras / Add-ons: Không có sẵn, nhưng nhiều plug-ins của bên thứ ba có sẵn.

– Thành phần độc đáo: Jumbotron

– Tài liệu hướng dẫn: Tốt

– Tính tuỳ chỉnh: GUI Customizer cơ ản. Thật không may, bạn cần phải nhập vào các giá trị màu bằng tay, vì không có bảng chọn màu có sẵn.

– Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE8 + (bạn cần Respond.js cho IE8)

– Giấy phép: MIT

Ghi chú về Bootstrap

Sức mạnh chính của Bootstrap là độ phổ biến rộng lớn của nó. Về mặt kỹ thuật, nó không thực sự tốt hơn so với những công cụ khác trong danh sách, nhưng nó cung cấp nhiều hơn các nguồn lực (các bài báo và hướng dẫn, các plug-in của bên thứ ba và các phần mở rộng, xây dựng theme, vv) so với bốn framework khác cộng lại. Trong ngắn hạn, Bootstrap là ở khắp mọi nơi . Và đây là lý do các nhà thiết kế web tiếp tục lựa chọn công cụ này.

Xem thêm: Hướng dẫn thiết kế web thích ứng với Bootstrap CSS

2. Foundation của ZURB

Foundation là công cụ lớn thứ hai trong danh sách này. Với một công ty vững chắc như ZURB đứng đằng sau, framework này có thực sự mạnh mẽ như chính cái tên của mình. Thời gian đã chứng minh tất cả, Foundation được sử dụng trên nhiều trang thiết kế web lớn như Facebook, Mozilla, Ebay, Yahoo !, và National Geographic …

cong cu framework Foundation

Công cụ framework Foundation

– Tác giả: ZURB

– Phát hành: 2011

– Phiên bản hiện tại: 5.4.7

– Độ nổi tiếng : 18,000+ sao trên GitHub

– Mô tả: “Framework front-end thích ứng cao cấp nhất thế giới”

– Khái niệm cốt lõi / nguyên tắc: Thiết kế web thích ứng và điện thoại di động đầu tiên, ngữ nghĩa

– Kích thước framework: 326 KB

– Bộ xử lý:  Sass

– Tính thích ứng:  Có

– Modular: Có

– Bắt đầu từ templates / layouts: Có

– Biểu tượng thiết lập: Foundation Icon Fonts

– Extras / Add-ons: Có

– Thành phần độc đáo: Thanh icon, Clearing Lightbox, Flex Video, Tổ hợp phím, Joyride, bảng giá.

– Tài liệu hướng dẫn: Tốt. Nhiều nguồn bổ sung có sẵn.

– Tính tuỳ chỉnh: Không GUI Customizer, chỉ dẫn sử dụng tuỳ biến.

– Hỗ trợ trình duyệt: Chrome, Firefox, Safari, IE9 +; iOS, Android, Windows Phone 7 +

– Giấy phép: MIT

Ghi chú về Foundation

Foundation là một  framework thực sự chuyên nghiệp với sự hỗ trợ kinh doanh, đào tạo, tư vấn và cung cấp. Nó cũng cung cấp nhiều nguồn lực để giúp bạn tìm hiểu và sử dụng framework nhanh hơn và dễ dàng hơn.

3) Semantic UI

Semantic UI là một nỗ lực không ngừng để xây dựng các thiết kế web có nhiều ngữ nghĩa. Nó sử dụng các nguyên tắc ngôn ngữ tự nhiên, do đó làm cho mã dễ đọc và dễ hiểu.

cong cu framework Semantic UI

Công cụ framework Semantic UI

– Tác giả: Jack Lukic

– Phát hành: 2013

– Phiên bản hiện tại: 1.2.0

– Độ nổi tiếng : 12,900+ sao trên GitHub

– Mô tả: “Một Framework thành phần UI dựa trên nguyên tắc hữu ích từ ngôn ngữ tự nhiên”

– Khái niệm cốt lõi / nguyên tắc:  Semantic, tag ambivalence, tính thích ứng

– Kích thước framework: 552 KB

– Bộ xử lý:  Less

– Tính thích ứng:  Có

– Modular: Có

– Bắt đầu từ templates / layouts: Không có

– Biểu tượng thiết lập:  Font Awesome

– Extras / Add-ons: Không

– Thành phần độc đáo: Divider, Flag, Reveal, Rail, Step, Quảng cáo, Card, Feed, Item, Thống kê, Dimmer, Rating, Shape.

– Tài liệu hướng dẫn: Rất tốt. Semantic cung cấp một tài liệu được tổ chức tổ chức  rất tốt, cộng với một trang web riêng biệt cung cấp hướng dẫn cho việc bắt đầu, tùy biến và tạo ra các chủ đề.

– Tính tuỳ chỉnh: Không GUI Customizer, chỉ dẫn sử dụng tuỳ biến.

– Hỗ trợ trình duyệt: Firefox, Chrome, Safari, IE10 + (với trình duyệt IE9 tiền tố chỉ), Android 4, Blackberry 10

– Giấy phép: MIT

Ghi chú về UI Semantic

Semantic là một framework sáng tạo và có đầy đủ tính năng nhất  trong số những framework được thảo luận ở đây. Cấu trúc tổng thể của framework và các quy ước đặt tên, về mặt logic rõ ràng và ngữ nghĩa của các lớp của nó cũng vượt qua những công cụ khác.

4) Pure của Yahoo!

Pure là một hệ thống modular nhẹ – được viết bằng tinh khiết bằng CSS – bao gồm các thành phần có thể được sử dụng cùng nhau hoặc riêng tùy thuộc vào nhu cầu của bạn.

cong cu framework Pure

Công cụ framework Pure

– Tác giả: Yahoo

– Phát hành: 2013

– Phiên bản hiện tại: 0.5.0

– Độ nổi tiếng : 9,900+ sao trên GitHub

– Mô tả: “Một bộ các module CSS thích ứng nhỏ mà bạn có thể sử dụng trong bất kỳ một dự án thiết kế web nào”

– Khái niệm cốt lõi / nguyên tắc:  SMACSS , tối giản

– Kích thước framework: 18 KB

– Bộ xử lý:  Không

– Tính thích ứng:  Có

– Modular: Có

– Bắt đầu từ templates / layouts: Không có

– Biểu tượng thiết lập:  Không. Bạn có thể sử dụng Font Awesome thay thế.

– Extras / Add-ons: Không

– Thành phần độc đáo: Không

– Tài liệu hướng dẫn: Tốt

– Tính tuỳ chỉnh: GUI Builder Skin cơ bản

– Hỗ trợ trình duyệt:  phiên bản mới nhất của Firefox, Chrome, Safari; IE7 +; iOS 6.x, 7.x; Android 4.x

– Giấy phép: Yahoo! BSD Inc.

Ghi chú về Pure

Pure cung cấp các style bare-bones cho một khởi đầu sạch của dự án web. Đó là một công cụ lý tưởng cho những nhà thiết kế we không cần một framework đầy đủ tính năng mà chỉ bao gồm các thành phần cụ thể để đưa vào tác phẩm của họ.

5) UIKit của YOOtheme

UIKit là một bộ sưu tập ngắn gọn, dễ dàng để sử dụng và dễ dàng để tùy chỉnh các thành phần. Mặc dù công cụ này chưa phổ biến như các công cụ khac trong danh sách, nhưng nó cung cấp các chức năng tương tự và chất lượng.

cong cu framework UIKIT

Công cụ framework UIKIT

– Tác giả: YOOtheme

– Phát hành: 2013

– Phiên bản hiện tại:  2.13.1

– Độ nổi tiếng : 3,800+ sao trên GitHub

– Mô tả: “Một framework front-ent nhẹ và modular để phát triển giao diện web nhanh và mạnh mẽ”

– Khái niệm cốt lõi / nguyên tắc: RWD, điện thoại di động đầu tiên

– Kích thước framework: 118 KB

– Bộ xử lý:  Less, Sass

– Tính thích ứng:  Có

– Modular: Có

– Bắt đầu từ templates / layouts: Có

– Biểu tượng thiết lập: Font Awesome

– Extras / Add-ons: Có

– Thành phần độc đáo: Article, Flex, Cover, HTML Editor

– Tài liệu hướng dẫn: Tốt

– Tính tuỳ chỉnh: GUI Customizer nâng cao

– Hỗ trợ trình duyệt:  Chrome, Firefox, Safari, IE9 +

– Giấy phép: MIT

Ghi chú về UIKit

UIKit được sử dụng thành công trong nhiều chủ đề WordPress . Nó cung cấp một cơ chế tùy biến linh hoạt và mạnh mẽ, hoặc bằng tay hoặc thông qua giao diện tùy biến của nó.

Framework nào phù hợp với bạn?

Cuối cùng, hãy để chúng tôi cung cấp cho bạn một số hướng dẫn về việc lựa chọn một framework chính xác, phù hợp. Dưới đây là một số những điều quan trọng:

– Một framework nổi tiếng? Một framework có độ phổ biến lớn hơn có nghĩa là nhiều người tham gia vào dự án, và do đó, có thêm các hướng dẫn và các bài viết từ cộng đồng, thực tế hơn. Ví dụ, có nhiều các thiết kế web, các phần mở rộng của bên thứ ba hơn, và tích hợp tốt hơn với các sản phẩm phát triển web tương đối. Mức độ nổi tiếng cũng có nghĩa là framework sẽ phát triển hơn trong tương lai – một framework với một cộng đồng lớn xung quanh thì ít có khả năng bị bỏ rơi.

– Một framework có sự phát triển tích cực? Một framework tốt cần phải nâng cấp liên tục với các công nghệ web mới nhất, đặc biệt là liên quan đến điện thoại di động.

– Tính cẩn thận của Framework? Nếu một framework cụ thể vẫn chưa được sử dụng và thử nghiệm trong các dự án thực tế, thì bạn có thể tự do thử nghiệm với nó, nhưng sử dụng nó trong các dự án web chuyên nghiệp của bạn có thể là một lựa chọn không khôn ngoan.

– Framework có tài liệu hướng dẫn tốt? Tài liệu tốt luôn là mong muốn để tạo thuận lợi cho quá trình học tập.

– Cấp độ đặc trưng của Framework? Điểm chính ở đây là một framework chung chung hơn là dễ dàng để làm việc hơn so với một framework có cấp độ đặc trưng cao. Trong hầu hết các trường hợp, sẽ tốt hơn để chọn một framework có thể áp dụng style  tối thiểu bởi vì nó dễ dàng hơn để tùy chỉnh.

Cuối cùng, trong trường hợp bạn vẫn không chắc chắn, bạn có thể áp dụng một cách tiếp cận mix-and-match. Nếu một framework cụ thể không thỏa mãn nhu cầu của bạn, bạn có thể kết hợp các thành phần từ hai hoặc nhiều cho dự án. Ví dụ, bạn có thể nhận được nhỏ hơn cơ sở  phong cách CSS từ một khuôn khổ, một hệ thống lưới điện từ ưa thích khác, và các thành phần phức tạp hơn từ một phần ba.

Bạn nghĩ gì về những framework trên đây? Để lại ý kiến dưới đây nhé 🙂

6 hướng dẫn thiết kế web bán hàng hiệu quả

Website thương mại điện tử, bán hàng đã không còn xa lạ với  bất kỳ người dùng sử dụng internet. Nhưng để website thu hút cũng như hoạt động hiệu quả không phải ai cũng làm được. Tạp chí thiết kế web xin chia sẻ một số hướng dẫn để giúp bạn có mộtthiết kế web tốt nhất.

6 huong dan thiet ke ban hang

6 hướng dẫn thiết kế web bán hàng hiệu quả

Với sự tiến bộ của công nghệ, ngày càng nhiều người sử dụng internet để thực hiện các giao dịch và nhu cầu của mình.Thương mại điện tử đóng một vai trò quan trọng. Nhiều người sử dụng mạng internet để mua sản phẩm hoặc dịch vụ trực tuyến. Nếu bạn đang có kế hoạch để thiết kế một cửa hàng thương mại điện tử, bạn nên tạo một thiết kế web bán hàng hấp dẫn và thu hút sự chú ý của người dùng mục tiêu. Bạn cần phải chắc chắn rằng thiết kế web của mình kết nối người sử dụng với các dịch vụ và sản phẩm.

Không quan trọng nếu giá của bạn là rất thấp hoặc bạn có những sản phẩm tốt nhất trên thị trường bởi vì nếu khách hàng bị lẫn lộn bởi thanh điều hướng trang web của bạn thì việc đặt mua hàng là bất khả thi.

Khả năng sử dụng có nghĩa là bạn phải làm cho quá trình mua hàng là nhanh chóng và dễ dàng nhất có thể. Những tài liệu thiết kế web dưới đây sẽ cho phép bạn tạo ra một thiết kế web bán hàng thương mại điện tử thân thiện hơn, có thể tạo ra tỷ lệ chuyển đổi cao hơn.

1) Thiết kế web cần phải có các “call to action” và nút đăng ký

Khi người dùng đăng ký trên thiết kế web của bạn, tránh các hình thức đăng ký kéo dài tới vài trang hoặc hơn. Là một thiết kế web thương mại điện tử, bạn không thực sự cần phải biết địa chỉ, số điện thoại , loại công việc khách hàng làm, vv Một địa chỉ email và mật khẩu đơn giản là tất cả mà bạn cần.

Đặc biệt, không bao giờ đánh giá thấp call-to-action bởi vì chúng giúp đỡ trong việc xây dựng tỷ lệ chuyển đổi cao hơn và cải thiện khả năng sử dụng trang web. Hãy thực hiện các nút call to action nổi bật.

nut goi hap dan

Tạo ra các nút kêu gọi hành động hấp dẫn

Bạn cần phải suy nghĩ về kích thước nút, màu sắc, font chữ, từ ngữ và định vị. Nó cần phải rất rõ ràng và bắt mắt trên nền thiết kế web của bạn. Hơn nữa, ngôn ngữ địa phương cần được xem xét, do đó sử dụng giao thức IP để phục vụ các phiên bản tùy chỉnh của nút call-to-action dựa trên vị trí của khách hàng.

2) Đừng ép buộc người dùng đăng ký khi mua hàng

Một điều người mua sắm trực tuyến ghét nhất là quá trình đăng ký dài và tẻ nhạt trước khi hoàn tất việc mua hàng. Điều gì xảy ra nếu bạn cho phép khách truy cập có thể kiểm tra các sản phẩm mà không cần phải đăng ký, sau đó yêu cầu họ đăng ký sau để thực hiện việc mua tiếp theo trên trang web của bạn dễ dàng hơn? Đây là loại phương pháp đã mang lại sự gia tăng doanh số đáng kể ( lên đến $ 300,000,000 ), cải thiện thời gian lưu lại của khách hàng trên website, và giảm bỏ việc rời bỏ giỏ hàng.

Xem thêm: 10 lý do người tiêu dùng từ bỏ giỏ hàng mua sắm trực tuyến

mua hang khong can dang ky

Mua hàng mà không cần phải đăng ký

Thiết kế web bán hàng của bạn cũng nên có một tùy chọn “Kiểm tra là khách”. Thay vì bảo người sử dụng điền vào tất cả các thông tin cá nhân, trang web của bạn nên cho họ đăng nhập thông qua tài khoản bất kỳ phương tiện truyền thông xã hội như Facebook, Twitter, Instagram,…

3) Chức năng tìm kiếm

Chức năng tìm kiếm giúp khách hàng tìm thấy những gì đang tìm kiếm, làm cho trải nghiệm mua sắm của họ tốt hơn. Chẳng ai muốn đi từ trang này sang trang khác, đọc những mô tả của mỗi sản phẩm bạn có trong cửa hàng trực tuyến, chỉ để tìm thấy những gì họ đang tìm kiếm?

cac chuc nang tim kiem linh hoat

Các chức năng tìm kiếm linh hoạt

Điều này là khuyến khích cho một trang web thương mại điện tử mà có một loạt các sản phẩm được bán ra, và nếu hộp tìm kiếm được thiết kế tinh tế , quá trình tìm kiếm có thể thậm chí nhanh hơn, cho phép người mua dễ dàng tìm thấy những gì họ đang tìm kiếm.

Bạn có thể xem thêm hướng dẫn Tạo hộp tìm kiếm đơn giản cho thiết kế web

4) Điều hướng Breadcrumb

Khi đặt hàng, khách hàng cần phải biết nơi họ đang đứng trong quá trình mua hàng của họ – có bao nhiêu bước đã thực hiện, và cách thực hiện nhiều hơn. Nếu không có điều hướngbreadcrumb , khách hàng sẽ dễ dàng chán ngán và nghĩ rằng thủ tục mua sắm của bạn sẽ kéo dài mãi mãi, làm cho họ dễ từ bỏ việc mua hàng nửa chừng.

dieu huong Breadcrumb

Điều hướng Breadcrumb

Hơn nữa, sử dụng điều hướng breadcrumb sẽ giúp khách hàng quay trở lại một bước trước và chỉnh sửa bất kỳ vấn đề mà họ đã thực hiện chứ không phải bắt đầu lại từ đầu, hoặc từ bỏ toàn bộ quá trình.

5) Giỏ mua hàng

xay dung gio than thien

Xây dựng giỏ mua hàng thân thiện

Đề nghị các sản phẩm liên quan

Bạn có thể xây dựng các mặt hàng liên quan, ví dụ như các loại pin, phụ kiện và các sản phẩm ngoại vi khi người dùng một máy tính xách tay. Điều này không chỉ giúp tiết kiệm thời gian của khách hàng mà còn giúp tăng doanh thu và duy trì khách hàng trên trang thương mại điện tử của bạn.

 

Phí ẩn

Khách hàng ghét việc phải kiểm tra khi phát hiện ra số tiền rút khỏi thẻ tín dụng lớn hơn 2% so với chi phí sản phẩm đã thanh toán. Hãy chắc chắn rằng bạn sẽ hiển thị giá, thuế , phí giao hàng, giảm giá, vì vậy mà người mua biết số tiền cuối cùng họ sẽ chi ra.

Nếu bạn đưa cho khách hàng của mình với rất nhiều chi phí không giải thích được, có nhiều khả năng họ sẽ từ bỏ mua hàng, và thậm chí còn tồi tệ hơn, niềm tin của họ trong thiết kế web của bạn sẽ bị phá vỡ.

Xem thêm: Thiết kế giỏ hàng web đơn giản với PHP

6) Đừng giấu thông tin liên lạc của bạn

Đối với thiết kế web bán hàng, hãy đảm bảo rằng trang web của bạn luôn có các thông tin liên lạc. Nếu bạn ẩn các thông tin liên lạc, có thể làm giảm lòng tin của khách hàng vào thương hiệu của bạn. Để chiếm được lòng tin của người sử dụng, bạn cũng nên đặt một số dịch vụ khách hàng 24/7.

luon hien tren web

Luôn hiển thị thông tin liên lạc trên website

Thêm nữa, không có thiết kế web bán hàng nào là không thích có các thông tin về điều khoản sử dụng và bảo mật thông tin cá nhân. Người mua hàng sẽ cảm thấy tự tin trong việc mua sản phẩm tại trang web thương mại điện tử của bạn, vì vậy bạn cần phải đảm bảo với họ rằng trang web của bạn là một thiết kế web bảo mật, có uy tín, có các tính năng để bảo vệ sự riêng tư của khách hàng của bạn.

Hy vọng những hướng dẫn và gợi ý trên đây sẽ giúp cho thiết kế web bán hàng thương mại điện tử của bạn hoạt động hiệu quả hơn.

9 thủ thuật bảo mật thiết kế web khỏi hacker

Hai chuyên gia bảo mật web đã tư vấn một số mẹo vặt để tối ưu hóa bảo mật  thiết kế web của bạn khỏi sự tấn công của hacker một cách đơn giản và tốt nhất.

Có thể bạn nghĩ rằng trang web của mình không có gì đáng giá để các hacker tấn công, nhưng tất cả đều có thể trở thành đối tượng của hacker từ “non trẻ” tới “chuyên nghiệp”. Phần lớn các vi phạm an ninh website không phải nhằm ăn cắp dữ liệu, thay đổi nội dung website của bạn, mà thay vào đó là nỗ lực sử dụng máy chủ của bạn như một relay email spam, thiết lập các máy chủ web tạm thời nhằm phục vụ các tập tin của một hành động bất hợp pháp.

cac thu thuat cua hacker

Các thủ thuật bảo mật web khỏi hacker

Đối với các thiết kế web bán hàng, thương mại điện tử, khi website chứa nhiều dữ liệu riêng tư của khách hàng thì việc bị hacker tấn công sẽ gây ảnh hưởng mạnh mẽ đến tài chính và uy tín của công ty. Dưới đây là 10 lời khuyên của chúng tôi để giúp cho website của bạn được an toàn khỏi tay hacker.

1) Giữ cho phần mềm luôn được cập nhật

Nghe có vẻ buồn cười, nhưng đảm bảo cho các phần mềm luôn được cập nhật là một việc làm quan trọng trong việc bảo mật website. Điều này áp dụng cho cả hai hệ điều hành  máy chủ và phần mềm chạy trên thiết kế web của bạn như một CMS hoặc diễn đàn. Khi lỗ hổng bảo mật web được tìm thấy trong các phần mềm, tin tặc nhanh chóng lợi dụng nó để tấn công.

Nếu bạn đang sử dụng một giải pháp managed hosting thì bạn không cần phải lo lắng quá nhiều về việc áp dụng các bản cập nhập bảo mật cho hệ điều hành bởi vì các công ty hosting đã thực hiện điều này.

cac phan mem

Các phần mềm, ứng dụng web luôn được cập nhật

Nếu bạn đang sử dụng phần mềm của bên thứ ba trên trang web của mình như một CMS hoặc diễn đàn, bạn nên chắc chắn bạn sẽ nhanh chóng sử dụng các bản vá lỗi bảo mật. Hầu hết các nhà cung cấp đều có một danh sách gửi thư hoặc nguồn cấp dữ liệu RSS chi tiết về bất kỳ vấn đề bảo mật web. WordPress, Umbraco và nhiều CMS khác thông báo với bạn về những bản cập nhập hệ thống ngay khi bạn đăng nhập.

2) SQL injection

Các cuộc tấn công SQL injection xảy ra khi hacker sử dụng một trường mẫu web hoặc tham sốURL để đạt được quyền truy cập vào cơ sở dữ liệu hoặc thao tác của bạn. Khi bạn sử dụng tiêu chuẩn Transact SQL, rất dễ dàng vô tình chèn mã giả mạo vào truy vấn của bạn mà có thể làm thay đổi bảng, lấy thông tin và xóa dữ liệu trên website. Bạn có thể dễ dàng ngăn chặn điều này bằng cách luôn sử dụng các truy vấn parameterised, hầu hết các ngôn ngữ web có tính năng này và rất dễ dàng để thực hiện.

SQL injection

SQL injection

3) XSS

XSS (Cross site scripting) là lỗ hổng cho phép hacker có thể chèn những đoạn mã client-script (thường là Javascript hoặc HTML) vào trang web, khi người dùng vào những trên web này, mã độc sẽ được thực thi trên máy của người dùng.

XSS

Tấn công XSS

Người ta không lường hết được mức độ nguy hiểm của XSS nhưng cũng không quá khó khăn để ngăn ngừa XSS. Giống như SQL Injection, bản chất của lỗi XSS là không kiểm soát kỹ dữ liệu nhập đầu vào, vì thế biện pháp hiệu quả nhất là kiểm tra kỹ dữ liệu nhập vào từ người dùng, chặn các từ khóa nguy hiểm, chỉ chấp nhận những dữ liệu hợp lệ.

4) Thông báo lỗi

Hãy cẩn thận với những thông tin đưa ra trong thông báo lỗi của bạn. Ví dụ bạn có một biểu mẫu đăng nhập vào thiết kế web của mình, bạn nên suy nghĩ về những từ ngữ mà bạn sử dụng để thông báo về việc đăng nhập thất bại. Bạn nên sử dụng các thông điệp chung chung như “tên đăng nhập hoặc mật khẩu không chính xác”. Nếu hacker cố gắng tạo một cuộc tấn công mạnh trong việc dò tên đăng nhập và mật khẩu người dùng thì nếu thông báo trường nhập không chính xác thì hacker sẽ biết và chỉ tập trung vào trường còn lại.

thong bao loi mo ho

Thông báo lỗi mơ hồ

5)  Server side validation

Validation nên luôn luôn được thực hiện ở phía trình duyệt và server. Các trình duyệt có thể bắt lỗi đơn giản như trường bắt buộc bị trống hay khi nhập text vào một trường chỉ nhận số. Tuy nhiên, có một số lỗi có thể bị bỏ qua, do vậy bạn nên chắc chắn rằng mình đã kiểm tra các máy chủ để không dẫn đến các mã độc hại hoặc mã kịch bản được chèn vào cơ sở dữ liệu có thể gây ra một số kết quả không mong muốn trên thiết kế web của bạn.

6) Mật khẩu

Mọi người đều biết rằng họ nên sử dụng một mật khẩu phức tạp, nhưng không có nghĩa là tất cả đều thực hiện. Sử dụng mật khẩu mạnh là rất quan trọng trong việc bảo mật server và website. Bên cạnh đó, bạn có thể đưa ra các yêu cầu để tăng độ mạnh cho mật khẩu của người dùng trên website để bảo mật thông tin của họ.

Có thể một số người dùng không thực sự thích nó. Yêu cầu mật khẩu tối thiểu 8 ký tự bao gồm ký tự hoa và số sẽ giúp bảo vệ thông tin tốt.

Mật khẩu phải luôn luôn được lưu trữ như là các giá trị được mã hóa, tốt nhất sử dụng một thuật toán hashed password như SHA. Sử dụng phương pháp này có nghĩa là bạn phải chứng thực mình là người dùng chỉ khi so sánh được các giá trị đã mã hóa. Đối với bảo mật trang web phụ, một ý tưởng tốt là sử dụng chuỗi cho mật khẩu.

bao mat bang password

Bảo mật website bằng password

Trong trường hợp một người nào đó hack và ăn cắp mật khẩu của bạn, bằng cách sử dụng hashed password có thể giúp hạn chế thiệt hại, chẳng hạn như việc giải mã. Rất may, nhiều CMS cung cấp cho quản trị viên rất nhiều tính năng bảo mật web được xây dựng, có thể để thiết lập mật khẩu mạnh tối thiểu.

7) Tập tin tải lên

Cho phép người dùng tải lên các tập tin trên thiết kế web tiềm ẩn một nguy cơ bảo mật web cao, thậm chí đơn giản chỉ là việc thay đổi avatar. Các rủi ro đó là bất kỳ tập tin được tải lên có thể chứa một kịch bản khi thực hiện trên máy chủ của bạn có thể khiến website bị tấn công.

Nếu bạn có một form biểu mẫu tải lên tập tin, bạn cần phải xem xét các file có nghi ngờ lớn. Nếu bạn đang cho phép người dùng tải lên hình ảnh, bạn không thể dựa vào phần mở rộng tập tin hoặc mime type để biết được tập tin được làm giả. Ngay cả khi mở tập tin và đọc các tiêu đề, hoặc sử dụng các chức năng để kiểm tra kích thước hình ảnh cũng không có bằng chứng đầy đủ. Hầu hết các định dạng hình ảnh cho phép lưu trữ một phần bình luận trong đó có chứa mã PHP mà có thể được thực hiện bởi các máy chủ.

Vì vậy, những gì bạn có thể làm để ngăn chặn điều này? Bạn muốn ngăn chặn người dùng tải tập tin lên web? Theo mặc định, máy chủ web sẽ không chạy các file có phần mở rộng hình ảnh, nhưng nó cũng không được khuyến khích để chỉ dựa vào kiểm tra phần mở rộng tập tin với các tên image.jpg.php đều được thông qua.

Một số tùy chọn để thay đổi tên của tập tin tải lên trên để đảm bảo các tập tin mở rộng đúng, hoặc để thay đổi quyền truy cập file, ví dụ, chmod 0666 vì vậy nó không thể được thực hiện. Nếu sử dụng * nix bạn có thể tạo một tập tin .htaccess (xem bên dưới) mà sẽ chỉ cho phép truy cập vào các tập tin thiết lập ngăn chặn các cuộc tấn công mở rộng đôi đã đề cập trước đó.

deny from all
Files ~ “^\w+\.(gif|jpe?g|png)$”>
order deny,allow
allow from all
/Files

Cuối cùng, các giải pháp được đề nghị là ngăn chặn truy cập trực tiếp đến các tập tin được tải lên tất cả cùng nhau. Bằng cách này, bất kỳ tập tin được tải lên trang web của bạn được lưu trữ trong một thư mục bên ngoài webroot hoặc trong cơ sở dữ liệu như là một blob. Nếu file của bạn không thể truy cập trực tiếp, bạn sẽ cần phải tạo ra một kịch bản để lấy các tập tin từ một thư mục riêng (hoặc một handler HTTP trong NET) và cung cấp chúng cho các trình duyệt. Thẻ hình ảnh hỗ trợ một thuộc tính src đó không phải là một địa chỉ trực tiếp đến một hình ảnh, do đó thuộc tính src của bạn có thể trỏ đến giao kịch bản tập tin của bạn cung cấp cho bạn thiết lập kiểu nội dung chính xác trong tiêu đề HTTP. Ví dụ:

1
2
3
4
5
6
7
8
9
10
11
12
13
img src="/imageDelivery.php?id=1234"  /
     
?php
     // imageDelivery.php
   
     // Fetch image filename from database based on $_GET["id"]
     ...
   
     // Deliver image to browser
      Header('Content-Type: image/gif');
     readfile('images/'.$fileName); 
   
?

Hầu hết các nhà cung cấp lưu trữ đối phó với các cấu hình máy chủ cho bạn, nhưng nếu bạn đang lưu trữ trang web của bạn trên máy chủ của riêng bạn thì có vài điều bạn phải kiểm tra.

Đảm bảo bạn có một thiết lập tường lửa, và chặn tất cả các cổng không cần thiết. Nếu có thể chỉ thiết lập mộtcho phép truy cập đến cổng 80 và 443 từ thế giới bên ngoài DMZ (Demilitarised Zone). Mặc dù điều này có thể không thực hiện được nếu bạn không có quyền truy cập vào máy chủ của bạn từ một mạng nội bộ bởi vì bạn cần phải mở cổng để cho phép tải lên các tập tin và đăng nhập từ xa vào máy chủ của bạn thông qua SSH hoặc RDP.

Nếu bạn đang cho phép các tập tin được tải lên từ Internet chỉ sử dụng phương pháp vận chuyển an toàn cho máy chủ của bạn như SFTP hoặc SSH.

Nếu có thể có cơ sở dữ liệu của bạn đang chạy trên một máy chủ khác với các máy chủ web của bạn. Việc làm này có nghĩa là các máy chủ cơ sở dữ liệu có thể không được truy cập trực tiếp từ thế giới bên ngoài, chỉ có máy chủ web của bạn có thể truy cập vào nó, giảm thiểu nguy cơ dữ liệu của bạn được tiếp xúc.

Cuối cùng, đừng quên về hạn chế quyền truy cập vật lý vào máy chủ của bạn.

8) SSL

SSL là viết tắt của từ Secure Sockets Layer. Đây là một tiêu chuẩn an ninh công nghệ toàn cầu tạo ra một liên kết được mã hóa giữa máy chủ web và trình duyệt. Liên kết này đảm bảo tất cả các dữ liệu trao đổi giữa máy chủ web và trình duyệt luôn được bảo mật và an toàn.

SSL đảm bảo rằng tất cả các dữ liệu được truyền giữa các máy chủ web và các trình duyệt được mang tính riêng tư, tách rời. SSL là một chuẩn công nghiệp được sử dụng bởi hàng triệu trang web trong việc bảo vệ các giao dịch trực tuyến với khách hàng của họ.

su dung ssl

Sử dụng một chứng thực SSL

9) Sử dụng các công cụ bảo mật web

Sau khi đã thử nghiệm tất cả các mẹo vặt bảo mật web ở trên, bạn nên dành thời gian kiểm tra an ninh trang web của mình. Cách hiệu quả nhất để làm điều này là sử dụng một số công cụ bảo mật website, thường được gọi là các thử nghiệm thâm nhập.

Có rất nhiều sản phẩm thương mại và miễn phí để hỗ trợ bạn trong việc này. Tham khảo một số  Công cụ kiểm tra lỗ hổng trên thiết kế web, ứng dụng web và chọn ra cho mình một công cụ phù hợp.

Hy vọng rằng những lời khuyên trên sẽ giúp cho trang web và thông tin của bạn được bảo mật an toàn. Hiện nay hầu hết các CMS đều có nhiều tính năng bảo mật web có sẵn nhưng tốt nhất bạn cũng nên trang bị sẵn cho mình một số kiến thức khai thác bảo mật phổ biến để đảm bảo bạn luôn thực hiện đúng cách.

Chúc thành công!