Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)
Đây là một phần trong nhóm bài Xây Dưng Trang Khởi Nghiệp với PHP trên Envato Tuts+. Trong chuỗi bài này, tôi sẽ hướng dẫn bạn quá trình xây dựng trang web khởi nghiệp từ phần ý tưởng đến thực tiễn qua Meeting Planner của tôi như là một ví dụ cụ thể. Ở mỗi bước, tôi sẽ sử dụng mã nguồn Meeting Planner làm ví dụ để các bạn có thể học theo. Tôi cũng sẽ chỉ ra các vấn đề phát sinh về kinh doanh có liên quan đến khởi nghiệp.
Cải Thiện Trang Chủ
Trang chủ của một web dịch vụ có nhiều vai trò. Trang chủ cho phép mọi người dễ dàng đăng ký và bắt đầu sử dụng ứng dụng. Nhưng trang chủ cũng cần có thẩm mỹ nhất định cho người đọc và cho họ ấn tượng chuyên nghiệp về những dịch vụ mà trang sẽ cung cấp.
Vì tôi quá chú ý vào việc xây dựng chức năng lên lịch cho Meeting Planner, tôi đã không có gian tô điểm cho trang chủ - thẳng thắn mà nói đó là thiếu sót, làm cho người xem mới không được ấn tượng.
Trong khi tôi là một người quản lý sản phẩm và chương trình, biết một chút thiết kế về UX và phát triển web, tôi cũng không quá chuyên về thiết kế đồ hoạ hoặc đam mê HTML/CSS. Tôi cũng không sử dụng các nguồn tài nguyên ở ngoài cho dự án, vì thế tôi đã tự mình thực hiện việc cải thiện trang chủ.
Bài hôm nay, tôi sẽ hướng dẫn các bạn làm thế nào tôi đã củng cố trang chủ và những khía cạnh của Bootstrap và CSS mà tôi đã khai thác để mang đến sự chuyên nghiệp cho trang chủ. Có rất nhiều thứ bạn có thể làm được với Bootstrap nếu nghiên cứu sâu hơn.
Nếu bạn chưa thử qua Meeting Planner hoặc Simple Planner, tiến lên và đặt lịch hẹn đầu tiên cho bạn. Tôi có tham gia vào phần bình luận, vậy nói với tôi bạn nghĩ gì nhé! Bạn cũng có thể kết nối với tôi qua Twitter @reifman. Tôi đặc biệt thú vị nếu được đề nghị những chủ đề nổi bật cho các bài viết hướng sắp đến.
Tôi muốn nhắc rằng, tất cả mã của Meeting Planner được viết trên nền của Yii2 cho PHP. Nếu bạn thích học thêm về Yii2, hãy xem qua chuỗi bài Lập Trình cùng Yii2 nhé.
Trang Chủ Hiện Tại
Ở phần trước, tôi đề cập đến Simple Planner cùng Meeting Planner với các phối hợp màu sắc và hình ảnh khác nhau. Trông nó không quá tệ, nhưng đường dần đến sản phẩm và nút đăng ký lại ở dưới thanh cuộn. Người xem lần đầu sẽ cơ bản thấy phần ảnh.
Đây là cái nhìn cận cảnh:
Lên kế hoạch cho những cải tiến
Bạn có thể thấy phiên bản sau cùng tôi tạo ra phía trên. Chủ yếu, tôi muốn di chuyển phần mồi dẫn sản phẩm và chọn lựa đăng ký lên phía trên trên phần cuộn khi không phải làm rối hình nền của trang chủ.
Chủ yếu, tôi đã cần làm 4 việc:
- Chắc chắn rằng hình nền đã thích ứng tốt và có khả năng áp dụng độ mờ đục (trong suốt)
- Tạo thêm cột bên trái với nền trong suốt để hiển thị mồi dẫn.
- Tạo một cột bên phải để hiện thị các bảng cho nút đăng ký, đăng nhập và mẫu báo tin với một ít hiệu ứng trong suốt.
- Chắc chắn rằng băng chạy video được đặt bên dưới ảnh hình nền.
Hãy nhìn qua mỗi thử thách.
Tái cấu trúc hình ảnh nền.
Để làm cho hình ảnh nên trở nên thích ứng đáng tin, tôi đã viết lại phần mã để đặt nó thành ảnh nền trên thành phần body của trang.
Đầu tiên, tôi đã tạo ra file mới new home.css, có thể cấ hình trong file HomeAsset,php
1 |
<?php
|
2 |
/**
|
3 |
* @link http://www.yiiframework.com/
|
4 |
* @copyright Copyright (c) 2008 Yii Software LLC
|
5 |
* @license http://www.yiiframework.com/license/
|
6 |
*/
|
7 |
|
8 |
namespace frontend\assets; |
9 |
|
10 |
use yii\web\AssetBundle; |
11 |
|
12 |
/**
|
13 |
* @author Qiang Xue <qiang.xue@gmail.com>
|
14 |
* @since 2.0
|
15 |
*/
|
16 |
class HomeAsset extends AssetBundle |
17 |
{
|
18 |
public $basePath = '@webroot'; |
19 |
public $baseUrl = '@web'; |
20 |
public $css = [ |
21 |
'css/site.css', |
22 |
'css/home.css', |
23 |
'css/home-video.css', |
24 |
];
|
25 |
public $js = [ |
26 |
'js/home.js', |
27 |
'js/froogaloop2.min.js', |
28 |
];
|
29 |
public $depends = [ |
30 |
'yii\web\YiiAsset', |
31 |
'yii\bootstrap\BootstrapAsset', |
32 |
];
|
33 |
}
|
Mỗi bố cục sẽ gồm các tập tin hỗ trợ gồm có CSS, JavaScript và các thư viện phụ thuộc đi kèm.
Đây là phần đầu của tập tin home.css được định nghĩa trong thẻ body.
1 |
/* CSS used here will be applied after bootstrap.css */
|
2 |
body { |
3 |
-webkit-background-size: cover; |
4 |
-moz-background-size: cover; |
5 |
-o-background-size: cover; |
6 |
background-size: cover; |
7 |
}
|
Để hình nền xoay tự động, tôi thêm vào một thẻ style trong tập tin bố cục Home.php (CSS không làm được điều này)
1 |
<?php
|
2 |
use yii\helpers\Html; |
3 |
use yii\helpers\Url; |
4 |
use yii\bootstrap\Nav; |
5 |
use yii\bootstrap\NavBar; |
6 |
use yii\widgets\Breadcrumbs; |
7 |
use frontend\assets\HomeAsset; |
8 |
use frontend\widgets\Alert; |
9 |
|
10 |
/* @var $this \yii\web\View */
|
11 |
/* @var $content string */
|
12 |
|
13 |
HomeAsset::register($this); |
14 |
$urlPrefix = (isset(Yii::$app->params['urlPrefix'])? $urlPrefix = Yii::$app->params['urlPrefix'] : ''); |
15 |
?>
|
16 |
<?php $this->beginPage() ?> |
17 |
<!DOCTYPE html>
|
18 |
<html lang="<?= Yii::$app->language ?>" > |
19 |
<head>
|
20 |
<meta charset="<?= Yii::$app->charset ?>"/> |
21 |
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> |
22 |
<?= Html::csrfMetaTags() ?> |
23 |
<title><?= Html::encode($this->title) ?></title> |
24 |
<style type="text/css"> |
25 |
body { |
26 |
background: url('./img/home/home-<?= Yii::$app->params['site']['img'] ?>.jpg') no-repeat center 30px; |
27 |
}
|
28 |
</style>
|
29 |
<?php $this->head() ?> |
30 |
</head>
|
31 |
<body>
|
Điều này được ứng dụng với hình nền được chọn sẵn, đã được xác định trong phần trước bởi tập tin SiteHelper.php:
1 |
body {
|
2 |
background: url('./img/home/home-<?= Yii::$app->params['site']['img'] ?>.jpg') no-repeat center 30px;
|
3 |
} |
Phần bên trái của trình bày lưới
Tiếp theo, tôi tạo ra bố cục lưới sử dụng Bootstrap để hiện thi phần nội dung bên tay trái.
1 |
<div class="site-index "> |
2 |
<div class="row home-top"> |
3 |
<div class="col-md-6 col-md-offset-1"> |
4 |
<div class="jumbotron"> |
5 |
<h1><?php echo Yii::t('frontend','Simpler Scheduling'); ?></h1> |
6 |
<p class="lead">Choose times and places together. Make planning easy.</p> |
7 |
<div class="centered"> |
8 |
<p><a class="btn btn-lg btn-success" href="features"><?= Yii::t('frontend','Learn more') ?></a></p> |
9 |
</div>
|
10 |
</div> <!-- end jumbo --> |
11 |
</div>
|
Tôi sử dụng phần bù một đơn vị, col-md-offset-1, và một cột sáu đơn vị, col-md-6. Và thêm vài thứ tích hợp khác vào nữa.
Lớp home-top cho phép tôi tích hợp một khoảng cách chừa lề dọc cho những phần này. Tôi cho là 16% thì khá phù hợp, đặt trong tệp home.css
1 |
.home-top { |
2 |
margin-top:16%; |
3 |
}
|
Với việc điều chỉnh độ mờ cho Trang Chủ, opacity: 0.9; hình ảnh nền vẫn có thể nhìn xuyên thấu được, khá là thẩm mỹ:
1 |
.panel-default { |
2 |
opacity: 0.9; |
3 |
}
|
4 |
|
5 |
.jumbotron { |
6 |
text-align: center; |
7 |
background-color: rgba(0,0,0,0.3); |
8 |
color:#fff; |
9 |
border-radius:5px; |
10 |
}
|
11 |
.jumbotron .lead { |
12 |
color:#fff; |
13 |
}
|
14 |
|
15 |
.jumbotron .btn { |
16 |
font-size: 21px; |
17 |
opacity:.8; |
18 |
margin:25px; |
19 |
}
|
Đồng thời tôi cho phần bên trái có nền màu đen có điều chỉnh độ mờ với rgba, background-color: rgba(0,0,0,0.3);
RGBA là phần mở rộng của hệ màu RGB với kênh màu alpha - kênh này sẽ định nghĩa độ mờ của đối tượng: Một giá trị màu RGBA được xác định với: rgba(đỏ, xanh lục, xanh dương, hệ số alpha). Hệ số alpha có biên độ từ 0.0 (trong suốt toàn phần) đến 1.0 (mờ đục toàn phần) (W3 Schools)
Và tôi bo tròn góc các viền với border-radius: 5px;
Kết quả cho phép hình nền nhìn thấu suốt và đẩy mạnh phần chữ trắng nổi bật lên.
Những phần bên phải và các biểu mẫu
Để tạo phần cột bên phải, tôi tạo ra cột rộng ba đơn vị, col-md-3. Sau đó, tôi tạo ra hai bảng Bootstrap với cùng độ trong suốt 0.9.
1 |
<div class="col-md-3 "> |
2 |
<div class="panel panel-default"> |
3 |
<div class="panel-heading"> |
4 |
<strong><?php echo Yii::t('frontend','Signup or Login to Schedule a Meeting'); ?></strong> |
5 |
</div>
|
6 |
<div class="panel-body panel-auth-clients"> |
7 |
<?php $authAuthChoice = AuthChoice::begin([ |
8 |
'baseAuthUrl' => ['site/auth','mode'=>'signup'], |
9 |
'popupMode' => false, |
10 |
]); ?> |
11 |
<?= Yii::t('frontend','Connect with any of the following services:'); ?><br /><br /> |
12 |
<ul class="auth-clients" > |
13 |
<?php foreach ($authAuthChoice->getClients() as $client): ?> |
14 |
<li class="auth-client"><?php $authAuthChoice->clientLink($client) ?></li> |
15 |
<?php endforeach; ?> |
16 |
</ul>
|
17 |
<?php AuthChoice::end(); ?> |
18 |
</div>
|
19 |
<div class="panel-footer"> |
20 |
Or, <?= HTML::a(Yii::t('frontend','signup using your email address'),['site/signup']); ?> |
21 |
</div>
|
22 |
</div>
|
23 |
<div class="panel panel-default"> |
24 |
<div class="panel-heading"> |
25 |
<strong><?php echo Yii::t('frontend','Wait for the Official Launch'); ?></strong> |
26 |
</div>
|
27 |
<div class="panel-body"> |
28 |
<?= $this->render('launch');?> |
29 |
</div>
|
30 |
</div>
|
31 |
</div>
|
Phần giao diện AuthClient của bảng nằm trên cùng hiển thị biểu tượng Facebook, Google and Linkedin đã được miêu tả trong phần hướng dẫn trước.
Canh lề đứng cho phần băng chuyền Video
Cuối cùng, tôi cần chắc chắn rằng phần băng chuyền Video bên dưới có đủ phần chừa lề đứng để nó không che lấp hình nền. Tôi dùng lớp video-top:
1 |
.video-top { |
2 |
margin-top:23%; |
3 |
}
|
23% khá phù hợp cho bản desktop và cả mobile. Đây là mã HTML:
1 |
<div class="row video-top"> |
2 |
<div class="col-md-12"> |
3 |
<?= $this->render('_video_carousel.php',['urlPrefix'=>$urlPrefix]);?> |
4 |
</div>
|
5 |
</div>
|
Những trang đã cải thiện cho phiên bản mobile
Đây là những trang sau khi cải thiện được xem trên bản mobile.
Chúng trở nên hiệu quả hơn nhiều. Bây giờ người dùng có thể thấy ngay cả nội dung và hình ảnh mồi dẫn khi họ xem phiên bản mobile.
Kế đến là gì nhỉ?
DĨ nhiên, có rất nhiều cách để trau chuốt và cải thiện trang chủ. Nhưng tôi hy vọng bạn đã hiểu được bạn có thể nhanh chóng tận dụng sức mạnh của thư viện Bootstrap để nâng cấp thẩm mỹ và trải nghiệm chuyên nghiệp cho khách xem của bạn. Tôi đã có thể làm những điều này mà không phải thuê một người thiết kế hoặc lập trình viên CSS tới thời điểm này. Tôi hy vọng sẽ làm thế khi dự án có thêm kinh phí.
Qua vài tuần sắp đến, tôi sẽ theo dõi tỉ lệ khách xem đến người đăng ký và xem liệu những cải tiến có mang lại hiệu quả.
Sắp tới, tôi sẽ xây dựng những tính năng để nâng cấp Meeting Planner chẳng hạn như lên kế hoạch hoạt động, thêm SMS, và phát triển phiên bản cho di động. Có khá nhiều thứ cần làm. Hy vọng rằng bạn sẽ theo dõi hành trình của chúng tôi.
Trong thời gian này, vui lòng trải nghiệm Meeting Planner và chia sẻ với các đồng nghiệp, gia đình và bạn bè của bạn.
Tôi cũng chuẩn bị trải nghiệm với WeFunder dựa trên sự triển khai của luật kêu gọi vốn cộng đồng của SEC. Các bạn có thể theo trang cá nhân chúng tôi nếu bạn thấy hứng thú. Tôi cũng sẽ viết một bài hướng dẫn về điều này.
Các bạn có suy nghĩ? ý tưởng? phản hồi gì không? Bạn có thể liên hệ trực tiếp với tôi qua Twitter @reifman. Hãy theo dõi những bài hướng dẫn sắp tới của Xây Dựng Trang Khởi Nghiệp với PHP nhé.
Liên kết liên quan
