Анимированный сайт на Drupal

Главные вкладки

Аватар пользователя sars sars 9 декабря 2009 в 0:08

Прошу уважаемое сообщество оценить и выразить свое мнение по поводу сайта webakula.com
Сделан на drupal 6. Из сторонних модулей:
CCK
FileField
ImageField
Email
ImageAPI
ImageCache
Может немного долго грузиться, т.к. сейчас стоит на обычном компе со слабоватым коннектом.
Жду ваших мнений, критики и т.д. Smile

Комментарии

Аватар пользователя gor gor 9 декабря 2009 в 0:30

Неплохо очень!
Медленную загрузку заметил сразу - первый раз до 5секунд грузился.
Потом ничего, когда закешировало js, css на стороне браузера - стало побыстрее.

Странности:
На главной есть текст "Мы добавили в галерею еще 120 шаблонов" - но при переходе показывает только 3 шаблона.
Переход на англоязычный сайт работает, но там ничего сейчас нет.

Я верно понимаю что вы все сайты делаете клиентам на базе Drupal ?
Я вижу что своим клиентам вы предоставляете хостинг - у вас свой выделенный сервер?
Может у нас по поводу хостинга найдутся точки соприкосновения.

Аватар пользователя sars sars 9 декабря 2009 в 0:37

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

Аватар пользователя sars sars 9 декабря 2009 в 0:40

а насчет тормозов браузерных - я старался проверять во всех браузерах - ie6, 7, 8, safari, opera 9, 10, chrome...
вроде все работает... Есть небольшие проблемы с ie6,7 - из-за истории браузера... но поидее все равно должно нормально работать

Аватар пользователя FORTIS FORTIS 9 декабря 2009 в 1:13

а вы не можете выложить дамп сайта (файлов и базы)? Хоть кастрированный, былобы интересно разобраться что и как Smile

Аватар пользователя sars sars 9 декабря 2009 в 1:31

а что вас именно интересует? я могу рассказать... )
полный дамп не могу выложить, а рассказать или коды js, модуля могу выложить

Аватар пользователя FORTIS FORTIS 9 декабря 2009 в 1:42

сайт кстати понравился Smile

ну вот мне интересна ссылка "— Мы хотим быть достойно представлены в интернете, чтобы к",
при нажатии на которую выезжает текст - как это сделано? и js-файлики дайте, пожалуйста Smile
еще интересно, как сделан переход по ссылкам верхнего меню: как бегает рамка в меню, как листаются страницы? Smile

Аватар пользователя Stan.Ezersky Stan.Ezersky 9 декабря 2009 в 3:59

Понравился сайт, но не понимаю некоторых вещей:
сайт - веб акула, всюду нарисован какой-то карасик-)
в броузере Flock- сумасшедший дом, всё дёргается

welcome

Аватар пользователя sars sars 9 декабря 2009 в 10:34

"FORTIS" wrote:
при нажатии на которую выезжает текст - как это сделано?

В верстке определяем любой контейнер, которым должен управлять единственный тизер, находящийся внутри него. Даем ему класс p-container.
Внутри него определяем тизер классом teaser. Он будет ссылкой как бы...
Все остальные элементы внутри контейнера я определил классом full, но это не обязательно в принципе. Просто для этих элементов в css указано, что в активном блоке они видимые, а в неактивном нет.

Пример верстки:

<ul class="p-container active">
<li>
<span class="teaser">Логичная и удобная система администрирования сайта,</span>
<span class="full">позволит Вам или Вашим сотрудникам легко добавлять тратата.</span>
</li>
<li class="full">Современных подход разделения програмной тратата...</li>
<li class="full">Гибкая и продуманная тратата.</li>
</ul>

js простой, с комментами:

/**
   * страница Информации: при нажатии на зеленые пункты - они разъезжается вниз
   */

  $(".p-container span.teaser", context).click(function() {
    var $teaser = $(this);
    /* определяем контейнер, за который отвечает тизер */
    var $parent = $teaser.parents(".p-container");

    /*
     * Определяем высоту и анимируем контейнер (увеличиваем или
     * уменьшаем его высоту) У контейнера стоит overflow:hidden,
     * благодаря этому происходит постепенное появление контента.
     */

    /* Если пункт раскрыт - новая высота = высоте тизера */
    if ($parent.is(".active")) {
      var height = $teaser.outerHeight() + 1; // 1px на всякий
                                              // случай... из-за
                                              // line-height>1.2
                                              // случаются пакости
      $parent.animate({
        height : height
      }, 500, "swing", function() {
        $(this).toggleClass("active");
      });
    } else {
      /*
       * Иначе, если тизер не раскрыт определяем новую высоту
       * блока как боттом (топ+высота) последнего чайлда - топ
       * первого чайлда
       */

      var height = $parent.get(0).scrollHeight;
      $parent.toggleClass("active");
      $parent.animate({
        height : height
      }, 500, "swing");
    }
  });

Аватар пользователя sars sars 10 ноября 2015 в 11:46

"FORTIS" wrote:
еще интересно, как сделан переход по ссылкам верхнего меню: как бегает рамка в меню, как листаются страницы?

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

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

Аватар пользователя sars sars 10 ноября 2015 в 11:46

"FORTIS" wrote:
и интересно: как темизирована форма оформления заявки, файлик шаблона можно или что там еще? )

Форма заявки - это форма создания ноды с полями CCK.
Темизировать пришлось долговато, т.к. было много нюансов... Основная логика в template.php, его приложил, там тоже есть комменты. Переписаны почти все функции оформления филдов и прочего.
Кроме этого приложил сам шаблон формы.

Аватар пользователя sars sars 9 декабря 2009 в 10:56

"Stan.Ezersky" wrote:
Понравился сайт, но не понимаю некоторых вещей:
сайт - веб акула, всюду нарисован какой-то карасик-)

ну как бы... идея бела в том, чтобы даже маленькая рыбка может быть акулой бизнеса Smile типа того Smile
"Stan.Ezersky" wrote:
в броузере Flock- сумасшедший дом, всё дёргается

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

Аватар пользователя sars sars 9 декабря 2009 в 11:08

"gor" wrote:
На главной есть текст "Мы добавили в галерею еще 120 шаблонов" - но при переходе показывает только 3 шаблона.

да там зависимости нету Smile
просто тексты еще не все проверили и забили....
посмотрел Flock... да.. это жесть Smile
но проблема опять в том же.. навигация по истории браузера начинает глючить... надо покопаться с ней все таки...

Аватар пользователя NurOff NurOff 9 декабря 2009 в 11:55

Хорошая работа. Оригинально.
Карасик я понял, как замысел: клиент увидел, клиент клюнул, клиент попался Lol

Аватар пользователя sars sars 9 декабря 2009 в 11:57

"NurOff" wrote:
клиент попался :))

Хорошая интерпретация Lol
Главное, никому не говорить, особенно клиентам )

Аватар пользователя art-ego art-ego 9 декабря 2009 в 12:20

Отлично, мне нравится. По мелочи замечания есть, типа не все переведено. А еще буква W над футером напоминает лого Wordpress Smile

Аватар пользователя sars sars 9 декабря 2009 в 12:26

"digital_sword" wrote:
Гм... За основу брали Chrysalis?

мм... честно говоря не знаю что это...
"art-ego" wrote:
еще буква W над футером напоминает лого Wordpress :)

блин, не замечал, стоящее замечание )) Так и передам дезигнеру )

Аватар пользователя sars sars 15 декабря 2009 в 18:55

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

Аватар пользователя sars sars 16 декабря 2009 в 16:25

"FleurDeViande" wrote:
Обосрать очень легко...
Но действительно тормозит Chrome/Debian/Celeron M

Спасибо, значит еще надо будет поработать над тормозами... Но что-то мне подсказывает, что при анимации больших по площади объектов, тормозов не избежать... что же делать?..
При перелистывании страницы происходит анимация 3 объектов , один их них большой самый - сама страница. я пробовал убирать анимацию всех остальных объектов, только страницу оставлял, все равно , если подгрузить комп - то и анимация на сайте начинает подтормаживать...

Аватар пользователя FORTIS FORTIS 16 декабря 2009 в 16:55

jquery по-моему советуют пакованные версии скриптов а не минифицированные, они побыстрей.
или может вообще скрипты не сжимать...