() translation by (you can also view the original English article)
Этот урок является частью серии Построй свой стартап с PHP на Envato Tuts+. В этой серии я проведу вас через запуск стартапа от концепции до реального сайта, используя приложение «Планировщик встреч», как реальный пример. На каждом шагу я публикую код Планировщика встреч в виде примеров с открытым исходным кодом, на которых вы можете учиться. Я также буду затрагивать вопросы, связанные с запуском бизнеса по мере их возникновения.
Улучшаем домашнюю страницу
У домашней страницы веб-сервиса много ролей. Функционально она должна облегчять людям регистрацию и начало работы с приложением. А также, она должна затронуть посетителей своим внешним видом и дать им впечатление того, что вы профессионалы и что ваша услуга это именно то, о чём сообщает им домашняя страница.
Поскольку я настолько сконцентрировался на этом вопросе, создавая функции планирования для Планировщика Мероприятий, у меня не было времени, чтобы сосредоточиться на полировке домашней страницы — и, откровенно говоря, она не оправдывала ожиданий, в результате чего первые посетители не впечатлялись.
Хотя я являюсь менеджером программы и продукта, немного разработчиком UX и веб-разработчиком, я не являюсь опытным графическим дизайнером или гуру HTML/CSS. Я также не вкладываю внешние ресурсы в проект, поэтому мне нужно улучшать это самому.
В сегодняшнем руководстве я расскажу вам, как я усилил вид домашней страницы и какие аспекты Bootstrap и CSS я использовал, чтобы обеспечить более профессиональный внешний вид. С Bootstrap вы можете сделать много, если вы копнёте немного глубже.
Если вы ещё не опробовали Meeting Planner или Simple Planner, сделайте это и запланируйте своё первое мероприятие. Я принимаю участие в комментариях ниже, поэтому скажите мне, что вы думаете! Вы также можете связаться со мной по Twitter @reifman. Мне особенно интересно, если вы хотите предложить новые функции или темы для будущих уроков.
Напоминаем, что весь код для Планировщика встреч написан на фреймворке Yii2 для PHP. Если вы хотите узнать больше о Yii2, ознакомьтесь с нашей параллельной серией Программирование на Yii2.
Текущие домашние страницы
В последнем уроке я упомянул о запуске Simple Planner вместе с Meeting Planner с различными цветовыми схемами и изображениями. Они выглядели неплохо, но кнопки главного продукта и регистрации не были на видном месте. Прибывали первые посетители и, прежде всего, видели фотографию.
Вот более пристальный взгляд:
Планирование улучшений
Выше вы можете увидеть финальную версию того, что я создал. По сути, я хотел перенести главные опции, вход и регистрацию на видное место, слегка перекрывая фоновое изображение домашней страницы.
По существу, мне нужно было сделать четыре вещи:
- Убедиться, что фоновое изображение отзывчивое и на нём можно применить непрозрачность (прозрачность).
- Создать левую колонку с прозрачной панелью, чтобы отобразить главное сообщение.
- Создать правую колонку, чтобы отображать панели с регистрацией, входом и уведомлением о запуске с некоторой прозрачностью.
- Убедиться, что видео-карусель расположена под фоновым изображением.
Давайте посмотрим каждый шаг.
Изменение фонового изображения
Чтобы сделать фон более отзывчивым, я переписал код, чтобы разместить его, как фоновое изображение в элементе тела страницы.
Во-первых, я создал новую таблицу стилей home.css, которая будет настроена через файл 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 |
}
|
Файл ресурса определяет, какие CSS, JavaScript и зависимые библиотеки загружаются для каждого макета.
Вот верхняя часть home.css, задающая элемент 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 |
}
|
Чтобы фоновое изображение менялось динамически, я добавил тег стиля в файл макета, Home.php (через CSS нельзя этого сделать):
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>
|
Это применяет выбранное фоновое изображение, определенное в последнем эпизоде SiteHelper.php:
1 |
body {
|
2 |
background: url('./img/home/home-<?= Yii::$app->params['site']['img'] ?>.jpg') no-repeat center 30px;
|
3 |
} |
Левая сторона сетки
Затем я создал компоновку сетки Bootstrap, чтобы отобразить левую панель:
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>
|
Я использовал смещение на один col-md-offset-1 и столбец 6-го размера col-md-6. И есть несколько других аспектов, применённых здесь.
Класс home-top для строки позволил мне применить вертикальный отступ для этих панелей. Я обнаружил, что 16% отлично мне подходит, home.css:
1 |
.home-top { |
2 |
margin-top:16%; |
3 |
}
|
Путем придания панелям на главной странице небольшой непрозрачности opacity: 0.9;, фоновое изображение всё ещё немного видно, что было довольно эстетично:
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 |
}
|
Также я смог задать левой панели черный цвет фона, но с использованием rgba — background-color: rgba(0,0,0,0.3);.
Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом — который определяет непрозрачность объекта. Значение цвета RGBA задается с помощью: rgba(красный, зеленый, синий, альфа). Альфа-параметр — это число между 0.0 (полностью прозрачное) и 1.0 (полностью непрозрачное). (Школа W3)
И я создал круглые границы с border-radius:5px;.
Результат позволяет видеть фоновое изображение, а так же белый текст.
Правые панели и формы
Чтобы создать правую сторону, я создал колонку col-md-3. Затем я создал две панели, наследующие ту же самую непрозрачность 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>
|
Виджет AuthClient на верхней панели отображает значки Facebook, Google и LinkedIn, о которых я рассказывал в этом предыдущем уроке.
Вертикальный отступ для видео-карусели
Наконец, мне просто нужно было убедиться, что видео-карусель под главным изображением имеет достаточный вертикальный отступ, чтобы не накладываться на фоновое изображение. Для этого я использовал класс video-top:
1 |
.video-top { |
2 |
margin-top:23%; |
3 |
}
|
Отступ в 23% хорошо смотрелся для настольных компьютеров и мобильных устройств. Вот 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>
|
Улучшенные домашних страниц для мобильных
Вот как выглядят улучшенные главные страницы на мобильных устройствах:
Они намного эффективнее. Теперь, когда пользователи заходят с мобильных телефонов, они сразу видят контент, а не только главное изображение.
Что дальше?
Конечно, есть много способов поработать и улучшить домашнюю страницу. Но я надеюсь, что сегодня вы увидели, что вы можете быстро использовать общие элементы в Bootstrap, чтобы обеспечить эстетично профессиональный вид для ваших посетителей. Я оказался в состоянии сделать всё это, не прибегая к найму дизайнера со стороны и CSS-кодера, пока что. Я надеюсь сделать это в определенный момент, когда проект будет финансироваться.
В течение следующих нескольких недель я буду следить за соотношением посетителей и регистраций, чтобы понять, оправдаются ли улучшения.
Заглядывая в будущее, я создам функции для улучшения планировщика встреч, такие как планирование мероприятий, больше SMS и создам мобильное приложение. Там ещё много дел. Надеюсь, вы останетесь с нами.
В то же время, пожалуйста, ознакомьтесь с Планировщиком встреч и поделитесь им со своими деловыми партнерами, родственниками и друзьями.
Я также приближаюсь к запуску эксперимента с WeFunder, основанного на внедрении новых правил софинансирования от SEC. Вы можете следить за нашим профилем там, если хотите. Я также напишу об этом в следующем уроке.
Есть свои мысли? Идеи? Отзывы? Вы всегда можете связаться со мной прямо на Twitter @reifman. Следите за предстоящими уроками здесь, в серии Создание стартапа на PHP.
Ссылки по теме
