() translation by (you can also view the original English article)
यह ट्यूटोरियल एनवाटो टूट+(Envato Tuts) + पर PHP श्रृंखला के साथ आपका स्टार्टअप बिल्डिंग का एक हिस्सा है। इस सीरीज़ में, मैं एक वास्तविक जीवन के उदाहरण के रूप में मेरी मीटिंग प्लानर ऐप का उपयोग करके अवधारणा से वास्तविकता शुरू करने के माध्यम से आपको मार्गदर्शक करुंगा। रास्ते में हर कदम मे, मैं मीटिंग प्लानर कोड को ओपन-सोर्स उदाहरणों के रूप में रिलीज़ कर दूँगा जिन्हें आप सीख सकते हैं। मैं स्टार्टअप से जुड़े व्यावसायिक मुद्दों को भी संबोधित करूँगा, जैसे ही वे पैदा होते हैं।
होम पेज में सुधार
एक वेब सेवा होम पेज में कई भूमिकाएं हैं। कार्यात्मक रूप से, यह लोगों के लिए साइन अप करने और आवेदन के साथ आरंभ करना आसान बनाना होगा। लेकिन यह भी दर्शक को स्पर्श करें और उन्हें पेशेवर प्रभाव दें, जो आपकी सेवा उस होम पेज को बताती है जो उन्हें बताती है कि वह क्या करती है।
चूंकि मैं इस बिंदु पर ध्यान केंद्रित कर रहा ,हूं इसलिए मीटिंग प्लानर के लिए शेड्यूलिंग कार्यक्षमता का निर्माण कर रहा हूं, मेरे पास घर पृष्ठ को चमकाने पर ध्यान देने का समय नहीं था- और स्पष्ट रूप से यह कम हो रहा था, पहली बार दर्शक को असम्पीडित छोड़कर।
हालांकि मैं एक प्रोग्राम और उत्पाद प्रबंधक हूं, एक यूएक्स डिजाइनर और एक वेब डेवलपर का एक छोटा सा अंश, मैं एक कुशल ग्राफिक डिजाइनर या एचटीएमएल / सीएसएस गुरु नहीं हूं। न तो मैं अभी भी परियोजना में बाहरी संसाधनों का निवेश कर रहा हूं, इसलिए मुझे स्वयं को सुधारने की आवश्यकता है।
आज के प्रकरण में, मैं आपको इस बात के माध्यम से आगे बढ़ूंगा कि कैसे मैंने होम पेज को मजबूत किया और बूटस्ट्रैप और सीएसएस के कौन से पहलुओं का मुझे अधिक पेशेवर रूप प्रदान करने के लिए शोषण किया गया। यदि आप थोड़ा गहरा गोता लगाने के लिए आप अपने खुद के बूटस्ट्रैप से बहुत कुछ कर सकते हैं।
अगर आपने अभी तक मीटिंग प्लानर या सरल प्लानर को नहीं देखा है, तो आगे बढ़ो और अपनी पहली मीटिंग शेड्यूल करें। मैं नीचे टिप्पणी धागे में भाग लेता हु, तो मुझे बताओ कि आप क्या सोचते हैं! आप ट्विटर पर भी पहुंच सकते हैं @रेफमैन। अगर आप भविष्य के ट्यूटोरियल के लिए नई सुविधाओं या विषयों का सुझाव देना चाहते हैं तो मुझे विशेष रूप से दिलचस्पी है I
एक अनुस्मारक के रूप में, मीटिंग प्लानर के लिए सभी कोड Yii2 फ्रेमवर्क, PHP के लिए में लिखा गया है।यदि आप Yii2 के बारे में अधिक जानना चाहते हैं, तो Yii2 के साथ प्रोग्रामिंग हमारी समानांतर श्रृंखला देखें।
वर्तमान होम पेज
पिछले एपिसोड में मैंने बैठक नियोजक के साथ अलग रंग योजनाओं और छवियों के साथ सरल प्लानर लॉन्च करने का उल्लेख किया था। वे बुरा नहीं दिखते, लेकिन उत्पाद नेतृत्व और साइनअप बटन तह से नीचे थे। पहली बार आने वाले दर्शक आते हैं और मुख्य रूप से फोटो देखते हैं।
यहाँ करीब से देखे :
सुधार योजना
ऊपर, आप मेरे द्वारा निर्मित अंतिम संस्करण को देख सकते हैं। अनिवार्य रूप से, मैं मुख्य पृष्ठ पृष्ठभूमि छवि को पूरी तरह से बाधित नहीं करते हुए, नेतृत्व और प्रवेश और साइनअप विकल्पों को ऊपर से स्थानांतरित करना चाहता था।
मूलतः, मुझे चार चीजें करने की ज़रूरत थी:
- सुनिश्चित करें कि पृष्ठभूमि छवि उत्तरदायी थी और अस्पष्टता (पारदर्शिता) को लागू करने की क्षमता थी।
- नेतृत्व प्रदर्शित करने के लिए एक पारदर्शी पैनल के साथ एक बायां स्तंभ बनाएं।
- कुछ पारदर्शिता के साथ साइनअप, प्रवेश और लॉन्च सूचना फॉर्म के साथ पैनल प्रदर्शित करने के लिए दाएं हाथ कॉलम बनाएं।
- सुनिश्चित करें कि वीडियो हिंडोला(केरसेल ) पृष्ठभूमि छवि के नीचे स्थित है।
चलिए प्रत्येक चुनौती को देखें
पृष्ठभूमि छवि का पुनर्गठन
पृष्ठभूमि को और अधिक भरोसेमंद रूप से उत्तरदायी बनाने के लिए, मैं इसे पेज के शरीर तत्व पर पृष्ठभूमि छवि के रूप में रखने के लिए कोड को दोबारा लिखता हूं।
सबसे पहले, मैंने एक नया होम.सीएसएस(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 |
}
|
संपत्ति फ़ाइल यह निर्धारित करती है कि प्रत्येक लेआउट के लिए सीएसएस, जावास्क्रिप्ट और आश्रित पुस्तकालयों को लोड किया जाता है।
यहां 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) (सीएसएस ऐसा नहीं कर सकता):
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 |
} |
ग्रिड के बाएं हाथ की ओर
अगला, मैंने बाएं हाथ सामग्री पैनल प्रदर्शित करने के लिए एक बूटस्ट्रैप ग्रिड लेआउट बनाया:
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, और एक छह इकाई स्तंभ, 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 |
}
|
इसके अलावा, मैं बाएं हाथ वाले पैनल को एक काली पृष्ठभूमि रंग देने में सक्षम था, लेकिन अस्पष्टता के साथ आरजीबीए, background-color: rgba(0,0,0,0.3);।
आरजीबीए रंग मूल्य एक आरएफबी रंग मूल्यों का विस्तार है, जो अल्फा चैनल के साथ होता है - जो ऑब्जेक्ट की अपारदर्शिता को निर्दिष्ट करता है। एक आरजीबीए रंग मान इनके साथ निर्दिष्ट है: आरजीबीए (लाल, हरा, नीला, अल्फा) अल्फा पैरामीटर 0.0 (पूरी तरह से पारदर्शी) और 1.0 (पूरी तरह अपारदर्शी) के बीच एक संख्या है। (डब्ल्यू 3 स्कूल)
और मैंने 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 विजेट फेसबुक, गूगल और लिंक्डइन आइकन दिखाता है, जो मैंने इस पूर्व ट्यूटोरियल में शामिल किया था।
वीडियो हिंडोझल के लिए लंबवत मार्जिन
अंत में, मुझे यह सुनिश्चित करने की ज़रूरत थी कि पार्श्व के नीचे स्थित वीडियो हिंडोला(carousel) में पर्याप्त ऊर्ध्वाधर मार्जिन हो, ताकि पृष्ठभूमि छवि को ओवरले न करें। मैंने इसके लिए वीडियो-टॉप क्लास का इस्तेमाल किया:
1 |
.video-top { |
2 |
margin-top:23%; |
3 |
}
|
23% मार्जिन डेस्कटॉप और मोबाइल के लिए अच्छी तरह से काम किया और यहां एचटीएमएल है:
1 |
<div class="row video-top"> |
2 |
<div class="col-md-12"> |
3 |
<?= $this->render('_video_carousel.php',['urlPrefix'=>$urlPrefix]);?> |
4 |
</div>
|
5 |
</div>
|
बेहतर मोबाइल होम पेज
मोबाइल पर बेहतर बूटस्ट्रैप पृष्ठ कैसा दिखते हैं यह यहां बताया गया है:
वे अधिक प्रभावी हैं। अब, जब उपयोगकर्ता मोबाइल पर आते हैं, तो वे सामग्री को अभी और न सिर्फ मुख्य छवि देखते हैं।
आगे क्या होगा?
निश्चित रूप से, होमपेज अनुभव को सुधारने और सुधारने के लिए बहुत सारे तरीके हैं। लेकिन मुझे आशा है कि आपने आज देखा है कि आप बूटस्ट्रैप के सामान्य तत्वों को जल्दी से अपने दर्शकों के लिए एक सौंदर्यशास्त्र पेशेवर अनुभव प्रदान कर सकते हैं। मैं अभी तक एक बाहर डिजाइनर और सीएसएस कोडर को काम पर रखने के लिए सहारा के बिना यह सब करने में सक्षम था। मुझे आशा है कि ऐसा कुछ समय जब परियोजना को वित्त पोषित किया जाए।
अगले कुछ हफ्तों में, मैं साइनअप करने के लिए आगंतुकों के अनुपात की निगरानी करूँगा और देखें कि सुधारों का एहसास हो गया है या नहीं।
आगे देखिए, मैं मीटिंग प्लानर जैसे गतिविधि नियोजन, अधिक एसएमएस और मोबाइल ऐप के विकास को सक्षम करने में सुधार करने के लिए सुविधाओं का निर्माण करूँगा। अभी भी करने के लिए बहुत सारे हैं मुझे आशा है कि आप हमारे साथ रहेंगे।
इस बीच, कृपया बैठक नियोजक को देखें और इसे अपने व्यापारिक सहयोगियों, परिवारों और मित्रों के साथ साझा करें।
एसईसी के नए जमाव नियमों के कार्यान्वयन के आधार पर मैं भी WeFunder के साथ प्रयोग शुरू करने के करीब रहा हूं। अगर आप चाहें तो आप हमारे प्रोफाइल का अनुसरण कर सकते हैं मैं इसके बारे में भविष्य के ट्यूटोरियल में और भी लिखूंगा।
क्या आपके विचार हैं? विचार? प्रतिक्रिया? आप हमेशा ट्विटर पर @रेफेमैन पर सीधे पहुंच सकते हैं I PHP श्रृंखला के साथ अपने स्टार्टअप के निर्माण में यहां आने वाले ट्यूटोरियल के लिए देखें।
सम्बंधित लिंक्स
