Записки Web-мастера ⋆ Начинающему и опытному вэб-мастеру. Плагины для популярных CMS. Начни свой бизнес в Web!

Вступление.

Добро пожаловать в мой блог для начинающих и опытных веб-мастеров. Меня зовут Вячеслав, мне 36, я занимаюсь web-программированием и раскруткой сайтов с 2006 года.

Браузерные плагины для вэб-разработчиков и не только.

Хочу поделиться с вами, чем-то полезным. Начнем пожалуй с браузеров, точнее с плагинов для них. Речь пойдет о необходимом наборе плагинов для SEO оптимизации, анализа, разработки сайтов и не только.

Настраиваем Windows

Для комфортной работы нам потребуется изменить некоторые настройки Windows. Для начала настроим проводник для отображения расширений файлов (.html, .css…) В windows 10 это сделать довольно просто.

Настраиваем редактор веб-мастера. Прокачка Notepad++

Notepad++ — простой и удобный редактор для создания сайтов. Хорошо настроенный веб-редактор может очень сильно облегчить жизнь веб-мастеру: подсветка синтаксиса, сжатие и форматирование, автоподстановки, и даже исправление ошибок в коде.

Sublime Text 3 — топ 75 Sublime плагинов 2021 (PHP, JS, CSS… +тема и русификатор).

Sublime Text 3 — продвинутый мультиплатформенный редактор кода. Он имеет огромное количество плагинов, соответственно функционал редактора можно значительно расширить, чем мы и займемся. Прокачаем ваш Sublime Text 3 для web-разработки по полной. Рассмотрим топ 65 лучших плагинов 2020 — PHP, Python, JS, CSS… и их правильные настройки.

Open Server — локальный web-сервер. Установка популярных CMS.

Знаете ли вы, что чтобы сделать web-сайт, не обязательно сразу покупать домен и хостинг для него? Можно обойтись установкой специального комплекса программ для Windows — локального сервера.

Git — cистема контроля версий.

Git — не единственная, но очень популярная система контроля версий (регистрирует изменения в файлах, с возможностью отката.) Важнейший инструмент web-программиста. Качаем для вашей ОС — Git, устанавливаем. Запускаем Git Bash из контекстного меню, проверяем версию, пишем:

 git version

1	git version

Установка интернет-магазина на PrestaShop

Prestashop — популярный бесплатный и простой движок интернет-магазина, из коробки предоставляет огромный функционал. Пусть вас не пугают дорогие платные модули на офф.сайте, кстати там же есть и парочка полезных бесплатных — Prestashop вполне себе самодостаточна, то есть для нормальной работы интернет-магазина нужно минимум модулей. Из коробки в ней мощный набор функционала: красивые чпу, мощное и …

Prestashop 1.6 первые шаги

Заполнение каталога. Неплохое видео по заполнению каталога Prestashop. Правим стандартный шаблон default-bootstrap Prestashop 1.6.1.18 Стандартный шаблон в Prestashop 1.6 довольно неплохо сделан: адаптивный, код почти валидный и вроде бы все на своих местах. Но есть перу но: телефон в шапке скрыт в мобильном разрешении, лого сам на себя ссылается на главной, корзина как-то не в …

Кнопка вверх для Prestashop без модуля.

В стандартном шаблоне Prestashop почему-то нет кнопки вверх (скоролинга), хотя в админке она есть, исправим это недоразумение: в файл themes/default-bootstrap/footer.tpl перед </body>вставляем:

 &lt;a href="" title="Вверх" id="scroller"&gt;&lt;i class="icon-angle-up scroller" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;

1	<a href="" title="Вверх" id="scroller"><i class="icon-angle-up scroller" aria-hidden="true"></i></a>

в файле header.tpl перед </head> вставляем:

{literal}
&lt;script type="text/javascript"&gt;
$(document).ready(function() {
    $("#scroller").hide().removeAttr("href");
    if ($(window).scrollTop() &gt;= "250") $("#scroller").fadeIn("slow")
    $(window).scroll(function() {
        if ($(window).scrollTop() &lt;= "250") $("#scroller").fadeOut("slow")
        else $("#scroller").fadeIn("slow")
    });
    $("#scroller").click(function() {
        $('body,html').animate({ scrollTop: 0 }, 800);
    })
});
&lt;/script&gt;
{/literal}

{literal}

$(document).ready(function() {

$("#scroller").hide().removeAttr("href");

if ($(window).scrollTop() >= "250") $("#scroller").fadeIn("slow")

$(window).scroll(function() {

if ($(window).scrollTop() <= "250") $("#scroller").fadeOut("slow")

else $("#scroller").fadeIn("slow")

});

$("#scroller").click(function() {

$('body,html').animate({ scrollTop: 0 }, 800);

})

});

</script>

{/literal}

Далее в файле стилей themes\default-bootstrap\css\global.css, можно в самое начало, добавим код:

#scroller{
 display:none;
 position:fixed;
 bottom:0px;
 right:0px;
 width: 55px;
 height:55px;
 display: block;
 background-color: #FF9900;
 border-radius: 50%;
 color:#FFF;
 z-index: 99999999999999999999999;
 text-align:center;
}

i.scroller{
 font-size:36px;
 margin-top:5px;
 color:#FFF;
 z-index: 99999999999999999999999;
}

#scroller{

display:none;

position:fixed;

bottom:0px;

right:0px;

width: 55px;

height:55px;

display: block;

background-color: #FF9900;

border-radius: 50%;

color:#FFF;

z-index: 99999999999999999999999;

text-align:center;

}

i.scroller{

font-size:36px;

margin-top:5px;

color:#FFF;

z-index: 99999999999999999999999;

}

Обновляем страницу, радуемся результату). Если кнопка не пишется в дизайн, да и для уникальности …