Идея проекта
Проект фокусируется на повышении привлекательности туризма внутри страны за счет предоставления доступной, понятной, проверенной и консолидированной информации по всем официальным экотропам России.
Мы хотим внести свою лепту в экологическое просвещение туристов и популяризацию здорового образа жизни.
Экотропы России – это живой проект
Проект имеет 2 домена, 25 написанных статей от копирайтеров, но самое главное – повышенный интерес команды к проекту и отношение к нему не только как к учебному ради портфолио и получения опыта, но как к серьёзному, перспективному, нацеленному на долгосрочное развитие проекту, несущему очевидную пользу обществу.
На текущий момент действительно не существует адекватного сервиса, где можно быстро и легко найти экомаршрут для прогулки. Так родилась идея Экотроп – создать сайт-агрегатор, которым можно будет удобно пользоваться с любого устройства, и на котором собраны все экологические тропы нашей страны.
Прогресс в цифрах
- 90%Дизайн-макет
FigmaВсё почти готово, осталось несколько мелких деталей - 30%Разработка сайта
экотропы.рфНаше самое слабое место – нам пока сложно даётся разработка сайта на Вордпрессе, но мы нашли выход и подготовили полностью рабочую демо-версию сайта на Тильде - 50%СЕО и маркетинг
(С.Я.)Активный и ответственности маркетолог появился в нашей команде совсем недавно, в связи с чем разработка маркетинговой стратегии находится на начальной стадии. Однако, готова немалая часть работ по СЕО-продвижению. - 90%Документация
NotionБез сомнения, это – наша самая сильная сторона, вся документация своевременно записывается, прописываются каждые мелочи, всё фиксируется в Notion аналитиком
На Вордпресс-версии сайта
две страницы имеют 70% готовности:
В связи с текущими трудностями на Вордпрессе
Параллельно ведётся работа по разработке сайта на Тильде
Разработано три основных страницы сайта для версии на Тильде, также готовы страницы политики конфиденциальности и 404.
Оба сайта (eco-trails.ru и экотропы.рф) имеют SSL-сертификат.
Дизайн
Искусство веб-дизайна состоит в том, чтобы сотворить пространство, в котором приятно находиться. И кажется, что нам это удалось.
1
Макет дизайна выглядит примерно так:
То, к чему мы стремимся – как на Вордпрессе, так и на Тильде. Тильда – не оправдание. Тильда – вызов...
2 сайта лучше, чем один.
Посмотреть макет можно здесь.
2 сайта лучше, чем один.
Посмотреть макет можно здесь.
И логотип! Мы долго ждали этого момента, и вот у нас есть логотип! Последние попытки, честно говоря, все хороши.
Остановились мы на этом варианте →
Остановились мы на этом варианте →
Как оно было сделано?
Без кода не обошлось, вся вёрстка просто пропитана различными скриптами
1
Сделано плавающее меню и прозрачность иконок в хедере (когда на них наводишь, верхняя иконка становится прозрачной и становится видно вторую иконку – ту, что под первой)
<style>
#rec551912708 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
}
.my-class:hover {
opacity: 0.01;
filter: alpha(opacity=100);
transition: 0.1s;
}
</style>
#rec551912708 {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
}
.my-class:hover {
opacity: 0.01;
filter: alpha(opacity=100);
transition: 0.1s;
}
</style>
2
Поиск по сайту реализован путём создания контейнера <div> в zero-block, далее я его просто закодил скриптом
<style>
.t838 .t-submit {
padding-left: 0px !important;
padding-right: 0px !important;
height: 44px !important;
}
.t838 .t-input {height: 44px !important}
.searchinput {z-index: 200 !important}
</style>
<script>
$( document ).ready(function() {
$("#rec551921799").appendTo(".searchinput .tn-atom");
});
</script>
.t838 .t-submit {
padding-left: 0px !important;
padding-right: 0px !important;
height: 44px !important;
}
.t838 .t-input {height: 44px !important}
.searchinput {z-index: 200 !important}
</style>
<script>
$( document ).ready(function() {
$("#rec551921799").appendTo(".searchinput .tn-atom");
});
</script>
3
Слайдер – довольно непростая реализация. Плашки были размещены в zero-block в один ряд, а через код реализована возможность проматывать эту полоску путём зажатия курсором мыши либо пальцем на экране. Также реализована возможность пользоваться стрелками, которые при нажатии меняют свой цвет на оранжевый.
<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>
<script>
$(function() {
var blockScrollId = '#rec550966726';
var blockArrowsId = '#rec551796681';
var shiftSize;
$(window).on('load resize', function(){
if (window.matchMedia('(max-width: 480px)').matches) {
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 640px)').matches) {
shiftSize = '239px';
}
else if (window.matchMedia('(max-width: 960px)').matches) {
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 1200px)').matches) {
shiftSize = '307px';
}
else {
shiftSize = '307px';
}
});
$(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
$(blockScrollId + ' .t396').css('overflow','hidden');
var pointerMode = 'mouse'; // default option for desktop devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
pointerMode = 'touch'; // switch to 'touch' for mobile devices
}
new ScrollBooster({
viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
content: $(blockScrollId + ' .scrollbooster-content')[0],
scrollMode: 'native',
pointerMode: pointerMode,
bounce: false,
onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
});
$(blockArrowsId + ' .arrow-left').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
});
$(blockArrowsId + ' .arrow-right').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '+=' + shiftSize }, 300);
});
});
</script>
<style>
.scrollbooster-viewport {
cursor: -webkit-grab;
cursor: grab;
padding-bottom: 30px;
margin-bottom: -30px;
}
.scrollbooster-viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scrollbooster-content {
position: absolute;
width: 100%;
height: 100%;
}
.arrow-left,
.arrow-right {
cursor: pointer;
}
.arrow-left:hover,
.arrow-right:hover {
opacity: 0.01;
transition: 0.1s;
}
</style>
<script>
$(function() {
var blockScrollId = '#rec550966726';
var blockArrowsId = '#rec551796681';
var shiftSize;
$(window).on('load resize', function(){
if (window.matchMedia('(max-width: 480px)').matches) {
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 640px)').matches) {
shiftSize = '239px';
}
else if (window.matchMedia('(max-width: 960px)').matches) {
shiftSize = '297px';
}
else if (window.matchMedia('(max-width: 1200px)').matches) {
shiftSize = '307px';
}
else {
shiftSize = '307px';
}
});
$(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
$(blockScrollId + ' .t396').css('overflow','hidden');
var pointerMode = 'mouse'; // default option for desktop devices
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
pointerMode = 'touch'; // switch to 'touch' for mobile devices
}
new ScrollBooster({
viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
content: $(blockScrollId + ' .scrollbooster-content')[0],
scrollMode: 'native',
pointerMode: pointerMode,
bounce: false,
onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
});
$(blockArrowsId + ' .arrow-left').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
});
$(blockArrowsId + ' .arrow-right').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '+=' + shiftSize }, 300);
});
});
</script>
<style>
.scrollbooster-viewport {
cursor: -webkit-grab;
cursor: grab;
padding-bottom: 30px;
margin-bottom: -30px;
}
.scrollbooster-viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scrollbooster-content {
position: absolute;
width: 100%;
height: 100%;
}
.arrow-left,
.arrow-right {
cursor: pointer;
}
.arrow-left:hover,
.arrow-right:hover {
opacity: 0.01;
transition: 0.1s;
}
</style>
4
С FAQ тоже не всё так просто. В стандартном блоке нет возможности поменять изображение крестика. Поэтому, чтобы изменить плюсик хотя бы на стрелочку, пришлось вставлять код, в котором я указал нужное мне изображение, предварительно обработанное в Illustratior (как и многие другие иконки)
<style>
.t585__opened .t585__lines {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.t585__lines svg {
display: none;
}
.t585__lines::after {
content: " ";
width: 24px;
height: 24px;
position: absolute;
left: 0;
background-image: url(https://static.tildacdn.com/lib/tildaicon/39313234-3737-4331-b331-363363663039/Layer_25.svg);
background-size: 100%;
}
</style>
.t585__opened .t585__lines {
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.t585__lines svg {
display: none;
}
.t585__lines::after {
content: " ";
width: 24px;
height: 24px;
position: absolute;
left: 0;
background-image: url(https://static.tildacdn.com/lib/tildaicon/39313234-3737-4331-b331-363363663039/Layer_25.svg);
background-size: 100%;
}
</style>
5
Переключатель вкладок "Фото" и "Карта"
<style>
.t395__wrapper {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.t395__title {
line-height: 0.8;
}
@media screen and (max-width: 960px){
.t395__wrapper_mobile {display: none}
.t395__wrapper {
justify-content: center;
}
.t395__title {
font-size: 16px !important;
}
}
@media screen and (max-width:9000px){
.t395__col {overflow-x: auto}
div.t395__wrapper {
width: max-content;
}
}
.meiconbottom{
width:90px;
padding-bottom: 10px;
}
.t395__tab {
transition: all 0.7s cubic-bezier(0, 0, 0.8, 1.0);
}
</style>
<script>
$( document ).ready(function() {
//Добавляем фото в каждую вкладку
$(".t395__tab:eq(0) ").append('<img src="https://i.ibb.co/1Zdf1RW/for-me602-gallery-black-05px.png" class="meiconbottom t-img" imgfield="img">');
$(".t395__tab:eq(1) ").append('<img src="https://i.ibb.co/1Zdf1RW/for-me602-gallery-black-05px.png" class="meiconbottom t-img" imgfield="img">');
});
</script>
.t395__wrapper {
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.t395__title {
line-height: 0.8;
}
@media screen and (max-width: 960px){
.t395__wrapper_mobile {display: none}
.t395__wrapper {
justify-content: center;
}
.t395__title {
font-size: 16px !important;
}
}
@media screen and (max-width:9000px){
.t395__col {overflow-x: auto}
div.t395__wrapper {
width: max-content;
}
}
.meiconbottom{
width:90px;
padding-bottom: 10px;
}
.t395__tab {
transition: all 0.7s cubic-bezier(0, 0, 0.8, 1.0);
}
</style>
<script>
$( document ).ready(function() {
//Добавляем фото в каждую вкладку
$(".t395__tab:eq(0) ").append('<img src="https://i.ibb.co/1Zdf1RW/for-me602-gallery-black-05px.png" class="meiconbottom t-img" imgfield="img">');
$(".t395__tab:eq(1) ").append('<img src="https://i.ibb.co/1Zdf1RW/for-me602-gallery-black-05px.png" class="meiconbottom t-img" imgfield="img">');
});
</script>
6
А вот и карта. Долго пришлось повозиться. Через API не получилось – тот же ChatGPT говорит, что дело в самой Tilda. Поэтому пришлось делать без API, рисовать карту в GPX и вставлять координаты списком. Также мной были добавлены иконки от дизайнеров. Получилась карта, которая меня полностью устраивает за исключением основного – необходимо её доработать, а именно выключить все лишние элементы и добавить нужные нам.
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<style>
#map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
<script>
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [44.505049, 33.501354],
zoom: 15
});
var route = new ymaps.Polyline([
[44.505151, 33.510385],
[44.505290, 33.509785],
[44.505582, 33.509583],
[44.505897, 33.508989],
[44.506027, 33.509061],
[44.506059, 33.508304],
[44.506149, 33.507955],
[44.506011, 33.506919],
[44.505950, 33.505518],
[44.505790, 33.504595],
[44.505601, 33.502945],
[44.505258, 33.501016],
[44.504984, 33.499215],
[44.504664, 33.497852],
[44.504137, 33.496477],
[44.503649, 33.495240],
[44.502929, 33.494305],
[44.502304, 33.493970],
[44.502254, 33.493560]
], {
hintContent: 'Маршрут'
}, {
strokeColor: '#010101',
strokeWidth: 3
});
var startPoint = new ymaps.Placemark([44.505151, 33.510385], {
hintContent: 'Начало маршрута',
balloonContent: 'Это начало маршрута'
}, {
iconLayout: 'default#image',
iconImageHref: 'https://i.ibb.co/RB8TDmk/round-black.png',
iconImageSize: [10, 10],
iconImageOffset: [0, 0]
});
var endPoint = new ymaps.Placemark([44.502254, 33.493560], {
hintContent: 'Конец маршрута',
balloonContent: 'Это конец маршрута'
}, {
iconLayout: 'default#image',
iconImageHref: 'https://i.ibb.co/PMbcJ22/map-end-rout-black.png',
iconImageSize: [32, 51],
iconImageOffset: [0, 0]
});
myMap.geoObjects
.add(route)
.add(startPoint)
.add(endPoint);
myMap.setBounds(route.geometry.getBounds());
});
</script>
<style>
#map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
<script>
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [44.505049, 33.501354],
zoom: 15
});
var route = new ymaps.Polyline([
[44.505151, 33.510385],
[44.505290, 33.509785],
[44.505582, 33.509583],
[44.505897, 33.508989],
[44.506027, 33.509061],
[44.506059, 33.508304],
[44.506149, 33.507955],
[44.506011, 33.506919],
[44.505950, 33.505518],
[44.505790, 33.504595],
[44.505601, 33.502945],
[44.505258, 33.501016],
[44.504984, 33.499215],
[44.504664, 33.497852],
[44.504137, 33.496477],
[44.503649, 33.495240],
[44.502929, 33.494305],
[44.502304, 33.493970],
[44.502254, 33.493560]
], {
hintContent: 'Маршрут'
}, {
strokeColor: '#010101',
strokeWidth: 3
});
var startPoint = new ymaps.Placemark([44.505151, 33.510385], {
hintContent: 'Начало маршрута',
balloonContent: 'Это начало маршрута'
}, {
iconLayout: 'default#image',
iconImageHref: 'https://i.ibb.co/RB8TDmk/round-black.png',
iconImageSize: [10, 10],
iconImageOffset: [0, 0]
});
var endPoint = new ymaps.Placemark([44.502254, 33.493560], {
hintContent: 'Конец маршрута',
balloonContent: 'Это конец маршрута'
}, {
iconLayout: 'default#image',
iconImageHref: 'https://i.ibb.co/PMbcJ22/map-end-rout-black.png',
iconImageSize: [32, 51],
iconImageOffset: [0, 0]
});
myMap.geoObjects
.add(route)
.add(startPoint)
.add(endPoint);
myMap.setBounds(route.geometry.getBounds());
});
</script>
7
Слайдер с изображениями экотропы. Такого блока в Тильде тоже нет – сделано через код (правда, на базе стандартного блока).
<style>
.tn-elem .t-slds__bullet_wrapper {
display: flex !important;
box-sizing: border-box;
}
.tn-atom .t-slds__bullet {
width: 100%;
}
.tn-atom .t-slds__bullet_body {
height: 6px !important;
width: inherit !important;
border-radius: 0;
}
.tn-atom .t-slds__bullet_active ~ div>div {
opacity: 0;
}
.tn-atom .t-slds__bullet {
position: relative;
}
.tn-atom .t-slds__bullet:after {
content: "";
background-color: #e2e2e2;
position: absolute;
width: 100%;
height:1px;
left: 0;
top: 50%;
margin-top:0px;
z-index: -1;
}
</style>
.tn-elem .t-slds__bullet_wrapper {
display: flex !important;
box-sizing: border-box;
}
.tn-atom .t-slds__bullet {
width: 100%;
}
.tn-atom .t-slds__bullet_body {
height: 6px !important;
width: inherit !important;
border-radius: 0;
}
.tn-atom .t-slds__bullet_active ~ div>div {
opacity: 0;
}
.tn-atom .t-slds__bullet {
position: relative;
}
.tn-atom .t-slds__bullet:after {
content: "";
background-color: #e2e2e2;
position: absolute;
width: 100%;
height:1px;
left: 0;
top: 50%;
margin-top:0px;
z-index: -1;
}
</style>
Кстати
Кроме сайта параллельно готовится чат-бот в Телеграме. Зовут его Экотроп и он уже может рассказать аж про один экомаршрут, показать его карту, направить на официальный сайт, а, если необходимо, отводит к его создателю.
А вот и он... Бот Экотроп
И о Фиолентовской экотропе он уже может вам рассказать.
Спросите его сами.
t.me/eco_trails_bot
Либо переходите через шапку сайта.
Спросите его сами.
t.me/eco_trails_bot
Либо переходите через шапку сайта.
Пару моментов по СЕО
А именно – микроразметка и семантическое ядро
1
Я как в прошлом СЕО-специалист хорошо осознаю полезность микроразметки с точки зрения продвижения и был инициатором того, чтобы она у нас была уже в первом MVP хотя бы в Google (тем более, если сайт на Тильде).
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Экотропы России",
"item": "https://экотропы.рф"
},
{
"@type": "ListItem",
"position": 2,
"name": "Каталог экотроп",
"item": "https://экотропы.рф/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Фиолентовская экотропа"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Aggregate Rating",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue" : "4.9",
"ratingCount": "711",
"reviewCount": "5"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Где находится Фиолентовская тропа?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Экотропа пролегает вдоль побережья Фиолента. Это новый пешеходный маршрут, лёгкий и доступный, берет свое начало у Свято-Георгиевского монастыря и завершается на скале Орест и Пилад."
}
},
{
"@type": "Question",
"name": "Встречаются ли на маршруте ядовитые растения, змеи?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ранней весной могут встречаться змеи и ядовитые пауки каракуты. Ядовитые растения и насекомые, клещи, змеи, эндемики отсутствуют."
}
}
]
}
</script>
{
"@context": "https://schema.org/",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Экотропы России",
"item": "https://экотропы.рф"
},
{
"@type": "ListItem",
"position": 2,
"name": "Каталог экотроп",
"item": "https://экотропы.рф/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Фиолентовская экотропа"
}
]
}
</script>
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Aggregate Rating",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue" : "4.9",
"ratingCount": "711",
"reviewCount": "5"
}
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "Где находится Фиолентовская тропа?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Экотропа пролегает вдоль побережья Фиолента. Это новый пешеходный маршрут, лёгкий и доступный, берет свое начало у Свято-Георгиевского монастыря и завершается на скале Орест и Пилад."
}
},
{
"@type": "Question",
"name": "Встречаются ли на маршруте ядовитые растения, змеи?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Ранней весной могут встречаться змеи и ядовитые пауки каракуты. Ядовитые растения и насекомые, клещи, змеи, эндемики отсутствуют."
}
}
]
}
</script>
2
Семантическое ядро и мета-теги: семант уже давно собран, на его базе Варвара составляет мета-теги для главной страницы, каталога и экотроп. Процесс небыстрый. Особенно, если учесть, что необходимо сделать вычитку текстов от копирайтеров (есть ошибки). Но мы справимся. Ведь мы стремимся на оффлайн. Все вместе, кто сможет.
3
Страницы данного сайта принудительно проиндексированы через Google Indexing API, и на защите мы уже покажем некоторый трафик из органической выдачи. Планируется, что на защите у нас уже будут даже первые отзывы.
5
Кстати, об органической выдаче. У нас уже есть пара капель трафика.
Вернёмся к разработке
К Wordpress и Базам Данных
1
На данный момент главная страница сайта и страница каталога выглядят так:
Всё движется, развивается и, в конце концов, все мы с верой и надеждой ждём сайт, сделанный на Wordpress. С базой данных, со всеми картами и на домене eco-trails.ru (пока там примерно то же, что показано на картинках, но всё впереди).
Ребята действуют сообща, работают на одном GitHub.
2
Отдельно стоит сказать по базам данных – здесь у нас активен надёжный разработчик, который взял процесс под свой контроль и разобрался. Осталось только всё настроить, связать, заполнить данными.
3
Карта также под контролем разработчика, отвечающего за это, и он уже разобрался, как её настраивать. Задача была непростая, небанальная, но будет выполнена.
Каролина
Абзац назван именем нашего замечательного аналитика. Королевы ноушна. Человеком с сотней тысяч прочих скиллов, которые часто пригождались на проекте помимо аналитики.
