Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Code
  2. PHP
Code

Построение стартапа с PHP: Формирование главной страницы

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

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

Final product image
What You'll Be Creating

Этот урок является частью серии Построй свой стартап с PHP на Envato Tuts+. В этой серии я проведу вас через запуск стартапа от концепции до реального сайта, используя приложение «Планировщик встреч», как реальный пример. На каждом шагу я публикую код Планировщика встреч в виде примеров с открытым исходным кодом, на которых вы можете учиться. Я также буду затрагивать вопросы, связанные с запуском бизнеса по мере их возникновения.

Улучшаем домашнюю страницу

У домашней страницы веб-сервиса много ролей. Функционально она должна облегчять людям регистрацию и начало работы с приложением. А также, она должна затронуть посетителей своим внешним видом и дать им впечатление того, что вы профессионалы и что ваша услуга это именно то, о чём сообщает им домашняя страница.

Поскольку я настолько сконцентрировался на этом вопросе, создавая функции планирования для Планировщика Мероприятий, у меня не было времени, чтобы сосредоточиться на полировке домашней страницы — и, откровенно говоря, она не оправдывала ожиданий, в результате чего первые посетители не впечатлялись.

Хотя я являюсь менеджером программы и продукта, немного разработчиком UX и веб-разработчиком, я не являюсь опытным графическим дизайнером или гуру HTML/CSS. Я также не вкладываю внешние ресурсы в проект, поэтому мне нужно улучшать это самому.

В сегодняшнем руководстве ​​я расскажу вам, как я усилил вид домашней страницы и какие аспекты Bootstrap и CSS я использовал, чтобы обеспечить более профессиональный внешний вид. С Bootstrap вы можете сделать много, если вы копнёте немного глубже.

Если вы ещё не опробовали Meeting Planner или Simple Planner, сделайте это и запланируйте своё первое мероприятие. Я принимаю участие в комментариях ниже, поэтому скажите мне, что вы думаете! Вы также можете связаться со мной по Twitter @reifman. Мне особенно интересно, если вы хотите предложить новые функции или темы для будущих уроков.

Напоминаем, что весь код для Планировщика встреч написан на фреймворке Yii2 для PHP. Если вы хотите узнать больше о Yii2, ознакомьтесь с нашей параллельной серией Программирование на Yii2.

Текущие домашние страницы

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

В последнем уроке ​​я упомянул о запуске Simple Planner вместе с Meeting Planner с различными цветовыми схемами и изображениями. Они выглядели неплохо, но кнопки главного продукта и регистрации не были на видном месте. Прибывали первые посетители и, прежде всего, видели фотографию.

Вот более пристальный взгляд:

Building Your Startup Bootstrap Current Home Page

Планирование улучшений

Building Your Startup Bootstrap Improved Home Page

Выше вы можете увидеть финальную версию того, что я создал. По сути, я хотел перенести главные опции, вход и регистрацию на видное место, слегка перекрывая фоновое изображение домашней страницы.

По существу, мне нужно было сделать четыре вещи:

  1. Убедиться, что фоновое изображение отзывчивое и на нём можно применить непрозрачность (прозрачность).
  2. Создать левую колонку с прозрачной панелью, чтобы отобразить главное сообщение.
  3. Создать правую колонку, чтобы отображать панели с регистрацией, входом и уведомлением о запуске с некоторой прозрачностью.
  4. Убедиться, что видео-карусель расположена под фоновым изображением.

Давайте посмотрим каждый шаг.

Изменение фонового изображения

Чтобы сделать фон более отзывчивым, я переписал код, чтобы разместить его, как фоновое изображение в элементе тела страницы.

Во-первых, я создал новую таблицу стилей home.css, которая будет настроена через файл HomeAsset.php:

Файл ресурса определяет, какие CSS, JavaScript и зависимые библиотеки загружаются для каждого макета.

Вот верхняя часть home.css, задающая элемент body:

Чтобы фоновое изображение менялось динамически, я добавил тег стиля в файл макета, Home.php (через CSS нельзя этого сделать):

Это применяет выбранное фоновое изображение, определенное в последнем эпизоде ​​SiteHelper.php:

Левая сторона сетки

Building Your Startup Bootstrap Lefthand Panel

Затем я создал компоновку сетки Bootstrap, чтобы отобразить левую панель:

Я использовал смещение на один col-md-offset-1 и столбец 6-го размера col-md-6. И есть несколько других аспектов, применённых здесь.

Класс home-top для строки позволил мне применить вертикальный отступ для этих панелей. Я обнаружил, что 16% отлично мне подходит, home.css:

Путем придания панелям на главной странице небольшой непрозрачности opacity: 0.9;, фоновое изображение всё ещё немного видно, что было довольно эстетично:

Также я смог задать левой панели черный цвет фона, но с использованием rgba — background-color: rgba(0,0,0,0.3);.

Значения цвета RGBA являются расширением значений цвета RGB с альфа-каналом — который определяет непрозрачность объекта. Значение цвета RGBA задается с помощью: rgba(красный, зеленый, синий, альфа). Альфа-параметр — это число между 0.0 (полностью прозрачное) и 1.0 (полностью непрозрачное). (Школа W3)

И я создал круглые границы с border-radius:5px;.

Результат позволяет видеть фоновое изображение, а так же белый текст.

Правые панели и формы

Building Your Startup Bootstrap Righthand side Panels and Forms

Чтобы создать правую сторону, я создал колонку col-md-3. Затем я создал две панели, наследующие ту же самую непрозрачность 0,9:

Виджет AuthClient на верхней панели отображает значки Facebook, Google и LinkedIn, о которых я рассказывал в этом предыдущем уроке.

Вертикальный отступ для видео-карусели

Building Your Startup Bootstrap Video Carousel Vertical Top Margin

Наконец, мне просто нужно было убедиться, что видео-карусель под главным изображением имеет достаточный вертикальный отступ, чтобы не накладываться на фоновое изображение. Для этого я использовал класс video-top:

Отступ в 23% хорошо смотрелся для настольных компьютеров и мобильных устройств. Вот HTML:

Улучшенные домашних страниц для мобильных

Вот как выглядят улучшенные главные страницы на мобильных устройствах:

Building Your Startup Bootstrap Improved Mobile Home Pages side by side

Они намного эффективнее. Теперь, когда пользователи заходят с мобильных телефонов, они сразу видят контент, а не только главное изображение.

Что дальше?

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

Конечно, есть много способов поработать и улучшить домашнюю страницу. Но я надеюсь, что сегодня вы увидели, что вы можете быстро использовать общие элементы в Bootstrap, чтобы обеспечить эстетично профессиональный вид для ваших посетителей. Я оказался в состоянии сделать всё это, не прибегая к найму дизайнера со стороны и CSS-кодера, пока что. Я надеюсь сделать это в определенный момент, когда проект будет финансироваться.

В течение следующих нескольких недель я буду следить за соотношением посетителей и регистраций, чтобы понять, оправдаются ли улучшения.

Заглядывая в будущее, я создам функции для улучшения планировщика встреч, такие как планирование мероприятий, больше SMS и создам мобильное приложение. Там ещё много дел. Надеюсь, вы останетесь с нами.

В то же время, пожалуйста, ознакомьтесь с Планировщиком встреч и поделитесь им со своими деловыми партнерами, родственниками и друзьями.

Я также приближаюсь к запуску эксперимента с WeFunder, основанного на внедрении новых правил софинансирования от SEC. Вы можете следить за нашим профилем там, если хотите. Я также напишу об этом в следующем уроке.

Есть свои мысли? Идеи? Отзывы? Вы всегда можете связаться со мной прямо на Twitter @reifman. Следите за предстоящими уроками здесь, в серии Создание стартапа на PHP.

Ссылки по теме

Advertisement
Advertisement
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.