Разработване на мобилен шаблон за JomSocial

Пример за стандартната дървовидна структура на изгледа в компонента “JomSocial”, който търпи редакция чрез презаписване в мобилният шаблон е следната:

/components
    /com_community
        /templates
            /default
                 /css (каскадни стилове)
                /images (изображения)
                frontpage.index.php (шаблон за началната страница)
                profile.index.php (шаблон за личен профил)
                groups.index.php (шаблон за групите)
                events.index.php (шаблон за събитията)
                .....

Това което трябва да се направи е да се копира цялото съдържание от „изгледа” включително и каскадните стилове за социалната мрежа и да се прехвърли в папката на мобилният шаблон за Joomla. Дървовидната структура на файловото съдържание в шаблона изглежда по следният начин:

/templates
    /cmobile (названието на директорията в която се намира мобилният шаблон)
      /css (каскадни стилове на мобилният шаблон)
      /images (изображения)
        /html
           /com_community (трябва да съвпада с името на директорията в “components”)
           /css (каскадни стилове на компонента)
           /images (практически няма да имаме нужда от тази директория)
               frontpage.index.php (шаблон за началната страница)
               profile.index.php (шаблон за личен профил)
               groups.index.php (шаблон за групите)
               events.index.php (шаблон за събитията)
              .....

Специфичната разлика в структурата е наличието на допълнителна директория “html”, в която се поставят всички изгледи, върху които са правени промени. Така шаблоните на системата предлагат възможност за цялостно редактиране на изгледите на множество компоненти. Освен на компоненти, има възможност за презаписване и на модули.

Стъпките от тук нататък се изразяват в старателното редактиране на всеки един изглед от социалната мрежа, като в повечето случаи това са:

  • изчистване на ненужен XHTML код
  • изчистване на ненужни функционалности за мобилната версия
  • цялостно пренаписване на на каскадния стил, за максимално оптимизиране на размера му

Разлики между настолна и мобилна версия на Campus.bgФиг.1. Разлика в началните страници при стандартният и мобилният уеб дизайн на “Campus.bg”

С помощта на str_replace() функцията в php успхяме да премахнем ненужен код, който иначе не можеше да премахнем от изгледа на “JomSocial”. Причината е, че от друг файлове, различни от тези за изгледа, се вмъкваха ненужни за мобилната версия скриптове, каскадни стилове, HTML коментари (<!— коментар ->).

За пример, за началната страница са направени следните промени:

  • създадено е ново меню, което да е само за мобилната версия, обединяващо вертикалното и хоризонталното на стандартния сайт
  • премахнати са потребителите и последните видео клипове под хоризонталната навигация
  • последни съобщения са изнесени под хоризонталната навигация
  • формата за търсене на потребители е изнесена точно под „последни съобщения”
  • от „Последни действия” са премахнати изображенията и е оставен само текста и датата
  • в „Последни групи” е оставена само една (преди 5), като също е премахнато изображението
  • „Кой е онлайн” е изнесено в най-долната част на мобилната версия, снимката е запазена, но оразмерена.

Постигнатият ефект с вътрешните страници е от сходно естество.

FacebookTwitterLinkedIn
4.1/5 - (94 votes)
The following two tabs change content below.
Ангел Евтимов а.к.а. thunder_go