Сайт моей компании, новый дизайн.

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

gor 19 декабря 2009 в 21:15

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

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

В разработке сайта были использованы следующие модули :
- book
- contact
- comment
- i18n
- poll
- pathauto
- profile
- tracker
- image
- imageapi, imagecache
- simplenews
- swftools
- pgapi
- imce
- captcha (image_captcha)
- BeautyTips
- BetterMessages
- Block Title Link
- Conditional Stylesheets
- token

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

Полностью с нуля (не на базе zen и прочего) была разработана и реализована тема.

Некоторые особенности реализации, которыми хочу поделится:

Меню сверху на внутренних страницах, ввиде иконок.
Это стандартное меню внутри, в который добавляются элементы. Отображение иконок реализовано через тему следующим кодом

<?php
function matrix_icon_links($links){
  $theme_path=drupal_get_path('theme','matrix');
  foreach($links as $mid => $link){
    $links[$mid]['title']='<img src="/'.$theme_path.'/images/Icons/'.$link['title'].'.png" alt="'.$link['title'].'" title="'.$link['title'].'" />';
    $links[$mid]['html'] =TRUE;
  }
  return theme('links',$links,array('class' => 'links primary-links'));
}
?>

Вывод меню соответственно через theme('icon_links', menu_navigation_links('menu-icon-menu'));

На титульной странице, отображение блоков услуг. Каждый такой блок добавляется через управление блоками.
Через дополнительный модуль "Block Title Link", я присваиваю каждому блоку ссылку, на которую он должен ссылаться.
Через темплейт блока, я сделал свой вариант отображения блоков в этом регионе:

<div class="block block-services" id="block-{$block->module}-{$block->delta}" {if $block->title_link}onClick="location.href='{$block->title_link}'"{/if}>

  <div class="image"><img src="{$block->image_src}" {if $block->subject}alt="{$block->subject}"{/if}/></div>

  <div class="content">{if $block->subject}<h2>{$block->subject}</h2>{/if}{$block->content}</div>

</div>

Это smarty темплейт блока, не phptemplate.

Картинку к каждому блоку я прицепил через template.php:

<?php
function matrix_preprocess_block(&$variables) {
  $theme_path=drupal_get_path('theme','matrix');
  
  if($variables['block']->region == 'services'){
    switch($variables['block']->delta){
      case 10:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/drupalhosting.png';
        break;
      case 11:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/managedserver.png';
        break;
      case 12:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/limiter.png';
        break;
      case 13:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/iphonedev.png';
        break;
      case 14:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/contact.png';
        break;
      case 15:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/support.png';
        break;
      default:
          $variables['block']->image_src = $theme_path.'/images/blockIcons/default.png';
    }
  }
}
?>

На внутренних страницах доступен слайдер авторизации, как на подобии у iPhone.
За основу взял материал статьи http://www.marcofolio.net/webdesign/the_iphone_unlock_screen_in_xhtml_cs...,
Но пришлось серьезно поиграться с визуальной частью отображения, так как оригинальный вариант не подходил по размерам в дизайн.

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

Сами блоки авторизации и регистрации имеют следующий код:
<?phpprint drupal_get_form('user_login'); ?>
<?phpprint drupal_get_form('user_register'); ?>

Так же есть блок "Отзывы клиентов", реализованный следующим кодом:


<?php
global $user;
$nid=18;
$count=7;
$sql = 'SELECT u.uid, c.name, c.nid, c.subject, c.cid, c.timestamp, c.homepage, n.title FROM {comments} c INNER JOIN {node} n ON n.nid = c.nid INNER JOIN {users} u ON c.uid = u.uid WHERE n.status = 1 AND c.status = %d AND n.nid=%d ORDER BY c.timestamp DESC';
$args=array(COMMENT_PUBLISHED,$nid);
$result = db_query_range($sql, $args, 0,$count);
$items = array();
while ($comment = db_fetch_object($result)) {
  $items[] = l($comment->subject, 'node/'. $comment->nid, array('fragment' => 'comment-'. $comment->cid)) .'<br />'. t('time ago', array('time' => format_interval(time() - $comment->timestamp)));
}
if ($items) {
    echo theme('item_list', $items);
  }
?>
<div class="links"><ul class="links"><li><?php echo l(t('All testimonials'),'node/'.$nid); ?></li></ul></div>
?>

Если вас в реализации что то еще заинтересовало, спрашивайте - обязательно расскажу.

Вложение	Размер
it-patrol.png	40.72 КБ

Drupal6

Крайне-медленная анимация "Slide to login" на FF 3.5.6 (Linux), Opera 10.10 (Win), IE8. До 10 сек. Скрин с IE8 в приложении. Смотрел IE6 и IE7 через IETester: в обоих браузерах одна ошибка - при развертывании формы логина не видно кнопки закрыть и курсор мыши иногда залазит под саму форму на родительское окно (Скрин в приложении).

UPD А так вообще конечно супер.

gor 20 декабря 2009 в 3:14

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

g00dvin, спасибо за скрины, поработаю с css для IE чтоб не вылазило и бек нормально делало.

vgoodvin 20 декабря 2009 в 9:40

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

Зачем? Зачем усложнять интерфейс? Это никому же не нужно. Я например только от вас понял, что слайдер надо перетянуть. Кто-то подумает что это вообще ошибка на сайте когда слайдер передвигается мышью или клавишами вместо того чтобы быстро сделал это сам. В идеале все работало только в Crome и Safari.

Serg_M 20 декабря 2009 в 11:32

А у меня сайт как-то долго загружается.

И в Opera 9.64 форма ввода логин-пароль с прозрачным фоном - довольно неудобно.

И капча непонятно порой где большая буква, а где маленькая (если это имеет значение).

gor 20 декабря 2009 в 17:38

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

T-34 20 декабря 2009 в 18:08

в шапке ошибка: "Сделайте ваш сервер непоколИбимым"
Дизайн понравился.

gor 20 декабря 2009 в 20:19

спасибо. ошибку поправил

yustos.com 20 декабря 2009 в 20:55

В капче интеллект с двумя "л" пишется

gor 21 декабря 2009 в 1:07

спасибо, поправил

art-ego 23 декабря 2009 в 21:20

Егор, у меня только 2 слайда отображаются - мотоцикл и Drupal hosting. так и должно быть?
немного отвлекают орнаменты, в чем их смысл? я про соты в шапке и плитку на подложке.
внутренние нравятся и фишка с авторизацией тоже. только по-русски "slide to login" напиши

art-ego 23 декабря 2009 в 22:39

Первое, что в голову пришло: "Погладь стрелку" или "Погладь меня" сразу вспомнилась Стрелка - собака-космонавт

Stan.Ezersky 25 декабря 2009 в 23:54

Мне понравилось!

Drupal Drupal на русском

Сайт моей компании, новый дизайн.

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

Комментарии