Форум пользователей Impera CMS
Impera CMS - отличный движок для лёгкого создания интернет магазина.
Обладает невероятным количеством функций, необходимых в онлайн торговле.

Следить
Главная
00:30
05 сен
#
написал:

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

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

Клиентка пишет:

Помогите мне доделать мобильную версию сайта. Техзадание из 6 пунктов прилагается.

Комментарий модератора: Каждый пункт размещён отдельным постом ниже.

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

Врут! Потому что все пункты задания вообще не касаются установленной на сайте программы. Часть пунктов из области изменить стилевое правило. Другая часть - про изменение тега вёрстки. Для решения задачи достаточно иметь базовое представление о разметочном языке HTML и стилевом языке CSS.

Проведём маленький урок

Совет от модератора:   Если вы ищите и никак не найдёте хороших специалистов для доработки вашего сайта или создания нового, то напишите запрос в контакты Impera CMS - вам постараются помочь.

Контакты »

Ведь всё равно по имперским руководствам и детально зарисованным примерам учится масса вебмастеров и на фрилансе, и в вебстудиях, и просто в интернете.

Я на всякий случай покажу ниже со скриншотами, как решался каждый пункт. Там делов ведь на пару минут. А то фриланс уж совсем никакой стал - обмельчал вконец не только в Беларуси, но и в Украине. Впрочем и в России фриланс это нечто: на каждую тысячу существующих там дилетантов если найдётся настоящий мастер - и то хорошо.

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

00:35
05 сен
#
написал:

Баг 1 - обрезанное время работы

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

Надо исправить. При недостатке места справа пусть время попадает на вторую строку.

Комментарий модератора: Базовая ширина экрана для аппаратов бюджетной ценовой категории, популярной у зрелой возрастной аудитории, равна 384 пикселя.

Баг 2 - малый отступ телефонов

Блок с номерами телефонов нависает над кнопкой "Написать" при просмотре на узком экране.

Надо сделать достаточный отступ, иначе этот участок страницы выглядит сбившимся в кучу.


Решение

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

Всего лишь требуется добавить 2 правила в конец стилей используемой на сайте темы (или на языке вебмастеров - шаблона). Каждую правку пишем в формате медиа-запроса к желаемому размеру экрана.

Первое правило позволяет соскакивание текста в блоке [Время работы: ЗНАЧЕНИЕ] на вторую строку и предписывает рассматривать текст ЗНАЧЕНИЕ как инлайновый блок, чтобы по возможности соскакивал весь блок, а не последние неуместившиеся цифры.

Медиа-запрос даже расширим немного: сделаем ко всем размерам экранов вплоть до 480 пикселей шириной.

@media screen and (max-width: 479.99px) {
    header .contacts p {
        white-space: normal;
    }
        header .contacts p span {
            display: inline-block;
        }
}

Второе правило создаёт под блоком телефонов отступ в 20 пикселей. Медиа-запрос сделаем ко всем экранам вплоть до 768 пикселей шириной.

@media screen and (max-width: 767.99px) {
    header .contacts div {
        margin-bottom: 20px;
    }
}

О селекторах блоков

Здесь у молодого фрилансера может возникнуть вопрос: как я узнал стилевой путь к нужному мне блоку? То есть вот такой селектор - например header .contacts p, откуда я его взял?

А всё просто! Прочитав очередной пункт техзадания, я открываю обозначенную страницу сайта в браузере типа Chrome или Mozilla, нахожу обозначенный блок и щёлкаю на нём правую кнопку мыши. Выпадает менюшка, где я щёлкаю пункт "Просмотреть код" и в боковом окне среди браузерных инструментов вебразработчика вижу исходный код разметки этого блока.

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

Результат

На мой взгляд, для минутной правки получилось вполне прилично, тем более в ситуации, что исправитель не является ни дизайнером, ни вебмастером.




Разработчик комментирует:

Ещё один вопрос, ответ на который скорее всего не знают фрилансеры: где находится стилевой файл текущей темы сайта, куда им придётся добавить свои правки?

Вне зависимости от используемой на сайте программы, этот css-файл ищут по-быстрому вот таким "костыльным" образом:

  • откройте страницу сайта
  • нажмите правую кнопку мыши
  • выберите пункт "Просмотреть код"
  • переместитесь к узлу <head>
  • найдите там последний подключенный CSS

Имя файла поможет легко найти его среди реальных папок шаблона. В конец этого файла и добавьте свои правки.

Например в рассмотренном выше случае стили подключались в такой последовательности:

  • http://irbook.by/design/BookSeller/css/bootstrap.min.css
  • http://irbook.by/design/BookSeller/css/styles.css
  • http://irbook.by/design/BookSeller/css/restyle.css

Значит правки следует записать в конец файла design/BookSeller/css/restyle.css.

01:01
05 сен
#
написал:

Баг 3 - обрезанный подвал

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

Надо исправить, пусть подвал страницы переключается в этот момент на многострочный вид.


Решение

Здесь мы создаём правило для подвального блока, где позволяем соскакивание текста. Этого достаточно, чтобы все строки блока приобрели такую способность. Медиа-запрос сделаем ко всем экранам вплоть до 992 пикселей шириной, чтобы текст сохранял читабельность и на других устройствах.

@media screen and (max-width: 991.99px) {
    footer .information {
        white-space: normal;
    }
}

Результат

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


01:08
05 сен
#
написал:

Баг 4 - пропавший поиск

На настольном компьютере страница сайта открывается с полоской меню под баннерами, а в правой части полосы есть строка поиска. На смартфоне эта полоса схлопывается и поле поиска пропадает.

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

Надо исправить, чтобы именно это меню по умолчанию было развернутым на узком экране.


Решение

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

Всё что требуется, это в шаблоне сайта открыть на редактирование файл модуля design/BookSeller/html/modules/menu.htm и затем тегу <menu class="collapse navbar-collapse"> добавить бутстраповский класс in, обозначающий меню в раскрытом состоянии.

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

Вот как исправление выглядит в разметочном коде файла (троеточием обозначены некие уже существующие строки в файле):

...
    ...
        ...
        <menu class="collapse navbar-collapse in">
            ...
        ...
    ...
...

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

Результат

Обратите внимание, мы добавили всего лишь две буквы, а теперь посмотрите, как поменялся внешний вид.


01:20
05 сен
#
написал:

Баг 5 - обрезанная форма корзины

Давайте положим какой-нибудь товар в корзину. Теперь попробуем оформить заказ. Страница корзины на настольном компьютере выглядит нормально и даёт пройти весь процесс оформления до конца.

Со смартфона с узким экраном оформить невозможно, потому что форма ввода оказывается шире экрана, некоторые кнопки формы оказываются за краем, их невозможно нажать.

Надо исправить ширину формы. Может быть уменьшить шрифт или убрать какую-то несущественную колонку в таблице заказываемых товаров.

Баг 6 - не та надпись в поле

Надо надпись в поле "кто вы..." заменить надписью "ваше имя...".


Решение

Тем же "костыльным" образом ищем тег формы среди файлов шаблона и обнаруживаем, что разметка страницы корзины представлена в макете design/BookSeller/html/cart.htm. Открываем этот файл на редактирование и вносим в него следующие 2 исправления:

...
    ...
        ...
            ...
                ...
                    ...
                    <th align="right" class="hidden-nr hidden-sm hidden-md">Итого</th>
                    <th class="hidden-nr">&nbsp;</th>
                ...
            ...
        ...
            ...
                ...
                    ...
                        ...
                        <td><input placeholder="ваше имя..." name="name" value="{valueSurname}" type="text" required onchange="changeBuyer(this)"></td>
                    ...
                ...
            ...
        ...
    ...
...

Первое исправление определяет несущественную (последнюю и предпоследнюю) колонку таблицы, которая будет исчезать на узких экранах. Сделаем это при помощи выдуманного класса hidden-nr, действующего на экранах до 512 пикселей шириной, стилевое правило которому напишем позже. Второе исправление - это желаемый текст дефолтной надписи в поле ввода.

Осталось теперь написать стилевое правило выдуманного класса, а заодно и правило для уменьшения шрифта в колонке названия товара:

@media screen and (max-width: 767.99px) {
    .page-cart .main-content .table td a {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 511.99px) {
    .hidden-nr {
        display: none !important;
    }
}

Результат

Как и следовало ожидать, всё стало на свои места и выглядит прилично.


Написание ответа

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


Обратите внимание! Для противодействия спаму новые посты форума проявляются с задержкой от нескольких минут, пока не пройдут модерацию.