Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP

Construye tu Startup Con PHP: Impulsa Tu Pagina de Inicio

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building Your Startup With PHP.
Building Your Startup: Designing a RESTful API
Building Your Startup: Leveraging Bootstrap, Ajax, and jQuery

Spanish (Español) translation by Cristian Marroquin (you can also view the original English article)

Final product image
What You'll Be Creating

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

Building Your Startup - Side by side looks at Simple Planner vs Meeting Planner home page

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:

Building Your Startup Bootstrap Current Home Page

Planeando las Mejoras

Building Your Startup Bootstrap Improved Home Page

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:

  1. Asegurar que la imagen de fondo fuera adaptativo y tuviera la capacidad de aplicar opacidad (transparencia).
  2. Crear una columna izquierda con un panel transparente para mostrar la entradilla.
  3. Crear un columna a la derecha para mostrar paneles con el formulario de registro, acceso y notificaciones de lanzamiento con algo de transparencia.
  4. 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:

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:

Para poder lograr rotar el fondo dinámicamente, Agregué una etiqueta style al archivo de la plantilla, Home.php (CSS no puede hacer eso):

Esto aplica la imagen de fondo escogida que se definió en el Ultimo episodio por SiteHelper.php:

La Parte Izquierda de la Cuadricula

Building Your Startup Bootstrap Lefthand Panel

A continuación, Creé una plantilla de cuadricula de Bootstrap para mostrar el contenido del panel en el lado izquierdo:

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:

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.

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.

Building Your Startup Bootstrap Righthand side Panels and Forms

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:

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

Building Your Startup Bootstrap Video Carousel Vertical Top Margin

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:

El margen de 23% funcionó bien para Escritorio y móvil. Y aqui esta el HTML:

La Mejora a la Pagina de Inicio Móvil.

A que esta como se ve en el móvil la pagina mejorada con Bootstrap:

Building Your Startup Bootstrap Improved Mobile Home Pages side by side

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?

Building Your Startup Multiple Domains - SimplePlannerio Home Page with Social Image

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

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.