() translation by (you can also view the original English article)
Este tutorial es parte de la serie Construyendo Tu Startup Con PHP en Envato Tuts+. En estas series, Te guiaré en el proceso de lanzar una startup desde el concepto hasta la realidad usando mi aplicación Meeting Planner como ejemplo de la vida real. En cada paso, estaré colocando el código de Meeting Planner como ejemplos de código abierto de los cuales puedes aprender. También abordaré problemas relacionados con las startup conforme vayan surgiendo.
Mejorando la Pagina de Inicio
La pagina de inicio de un servicio web tiene muchos roles. Funcionalmente, debe ser fácil para la gente registrarse y empezar a trabajar con la aplicación. Pero también tiene que tener un toque estético sobre los visitantes y darles una impresión de profesionalismo y que tu servicio entrega lo que la pagina de inicio les dice.
Ya que había estado tan enfocado en este punto construyendo la funcionalidad de agenda para Meeting Planner, No he tenido tiempo de enfocarme en pulir la pagina de inicio — y francamente fallaba, dejando a los visitantes primerizos poco impresionados.
Aunque soy un jefe de programa y producto, un poco de diseñador UX y un desarrollador web, no soy un diseñador gráfico habilidosos o un gurú de HTML/CSS. Tampoco estoy invirtiendo aun en recursos externos en el proyecto, así que necesito mejorar en esto yo mismo.
En el episodio de hoy, Avanzaremos por el como fortalecí la pagina de inicio y que aspectos de Bootstrap y CSS exploté para mejorar la apariencia hacia una mas profesional. Hay mucho que puedes hacer con Bootstrap por ti mismo si te sumerges un poco mas.
Si no has probado Meeting Planner o Simple Planner aun, adelante y programa tu primera reunión. Yo participo en los temas de conversaciones de abajo, así que dime ¡que es lo que opinas! Puedes además seguirme en Twitter @reifman. Estoy especialmente interesado si quieres sugerir nuevas características o temas para futuros tutoriales.
Como recordatorio, todo el código de Meeting Planner esta escrito en el Framework de PHP Yii2. si te gustaría aprender mas acerca de Yii2, revisa nuestra serie paralela Programando Con Yii2.
La Pagina de Inicio Actual
En el último episodio, Mencioné que estaba lanzando Simple Planner junto con Meeting Planner con diferentes esquemas de colores e imágenes. Los cuales no se veían mal, pero los botones de entrada y el de registrarse estaba muy abajo, los visitantes primerizos llegarían y primeramente verían la fotografía.
Aquí hay una vista mas cercana:
Planeando las Mejoras
Arriba, puedes ver la versión final que he creado. Esencialmente, quería migrar la entradilla y las opciones de acceso y de registro sombre la pagina, sin obstruir completamente la imagen de fondo de la pagina de inicio.
Esencialmente, Necesitaba hacer cuatro cosas:
- Asegurar que la imagen de fondo fuera adaptativo y tuviera la capacidad de aplicar opacidad (transparencia).
- Crear una columna izquierda con un panel transparente para mostrar la entradilla.
- Crear un columna a la derecha para mostrar paneles con el formulario de registro, acceso y notificaciones de lanzamiento con algo de transparencia.
- Asegurar que el carrusel de vídeo se posicionara a si mismo debajo del la imagen de fondo.
Vamos a ver cada desafió.
Reestructurar la Imagen del Fondo
Para hacer el fondo mas adaptativo, Reescribí el código para ponerlo como imagen de fondo en el elemento body de la pagina.
Primero, cree una nueva hoja de estilos home.css la cual sera configurada en el archivo 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 |
}
|
el Archivo de recurso determina cual CSS, JavaScript y librerias dependientes se cargan para cada plantilla.
Aquí esta la parte superior de home.css definiendo el elemento 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 |
}
|
Para poder lograr rotar el fondo dinámicamente, Agregué una etiqueta style al archivo de la plantilla, Home.php (CSS no puede hacer eso):
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>
|
Esto aplica la imagen de fondo escogida que se definió en el Ultimo episodio por SiteHelper.php:
1 |
body {
|
2 |
background: url('./img/home/home-<?= Yii::$app->params['site']['img'] ?>.jpg') no-repeat center 30px;
|
3 |
} |
La Parte Izquierda de la Cuadricula
A continuación, Creé una plantilla de cuadricula de Bootstrap para mostrar el contenido del panel en el lado izquierdo:
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>
|
Usé un desplazamiento de una-unidad, col-md-offset-1, y una columna de seis-unidades col-md-6. Y hay unos cuantos aspectos integrados aquí.
La clase home-top en la fila me permitió integrar un margen vertical para estos paneles. Encontré que 16% funciona bien para mi. para home.css:
1 |
.home-top { |
2 |
margin-top:16%; |
3 |
}
|
Para darle a los paneles en la pagina de inicio algo de opacidad, opacity: 0.9; la imagen de fondo aun se veía a través de ellos un poco, lo cual era estéticamente placentero.
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 |
}
|
También fui capaz de darle al panel de la izquierda un color de fondo negro pero con opacidad usando rgba, background-color:rgba(0,0,0,0.3);.
En RGBA los valores de los colores son una extensión de los valores de RGB con un canal alfa - el cual especifica la opacidad del objeto. Un valor de color RGBA es especificado con: rgba(rojo, verde, azul, alfa). El parámetro alfa es un número entre 0.0 (completamente transparente) y 1.0 (completamente opaco). (W3 Schools)
Y creé bordes redondeados usando border-radius:5px;.
El resultado permite que la imagen de fondo se vea a través de los elementos mientras promueve el texto blanco de entrada.
Los paneles y formularios del lado derecho.
Para crear el panel del lado derecho, Creé una columna de tres-unidades, col-md-3. Luego, Creé dos paneles de Bootstrap heredando la misma opacidad de 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>
|
el widget de AuthClient en el panel superior muestra los iconos de Facebook, Google y LinkedIn los cuales se cubrieron en este tutorial anterior.
Margen Vertical para el Carrusel de Video
Finalmente, Solo necesitaba asegurarme que el carrusel de vídeo debajo de la hoja tuviera suficiente margen vertical de modo que no se sobreponga con la imagen de fondo. Use la clase video-top para esto:
1 |
.video-top { |
2 |
margin-top:23%; |
3 |
}
|
El margen de 23% funcionó bien para Escritorio y móvil. Y aqui esta el 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>
|
La Mejora a la Pagina de Inicio Móvil.
A que esta como se ve en el móvil la pagina mejorada con Bootstrap:
Son mucho mas efectivos. Ahora, cuando los usuarios lleguen a través del móvil, verán el contenido de inmediato y no solo la imagen de introducción.
¿Qué sigue?
Ciertamente, hay muchas formas de pulir y mejorar la experiencia de la pagina de inicio. Pero Yo espero que hayas visto hoy que puedes rápidamente usar elemento comunes en Bootstrap para proveer una experiencia de estética profesional a tus visitantes. He sido capaz de hacer todo esto sin necesidad de contratar a un diseñador y un codificador de CSS, hasta ahora. Espero hacerlo en algún punto cuando el proyecto este bien fundado.
En las próximas semanas, Voy a monitorear el radio de visitantes que se registran y ver si las mejoras funcionaron.
Viendo a futuro, estaré creando características para mejorar Meeting Planner tales como planificador de actividades, mas SMS, y habilitar el desarrollo de una aplicación móvil.
A corto plazo, por favor revisa Meeting Planner y compártelo con tus socios de negocio, familia y amigos.
También me estoy acercando a lanzar la experiencia con WeFunder basado en la implementación de las nuevas reglas de financiación colectiva del SEC puedes seguir nuestro perfil ahi si así lo quieres. También voy a escribir mas acerca de esto en un futuro tutorial.
¿Tienes tus propios pensamientos? ¿Ideas? ¿Opiniones? Siempre puedes contactarme directamente en Twitter @reifman. Mira los tutoriales por venir aquí en la serie de Construye Tu Startup Con PHP.
Enlaces Relacionados
