Отчет по эксплуатационной практике

     Разработчики Joomla! на основе Mambo довольно быстро создали систему со значительно улучшенным администрированием. То, чего в функциональности недостает начальной системе, обычно можно добавить путем установки требуемых компонентов.

     Основные возможности:

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

 

Итог:

      После длительного анализа была выбрана  CMS Joomla! по некоторым преимуществам:

• наиболее простое сопровождение сайт (так как администрированием конечного сайта будет заниматься другой человек);
• многоплатформенность (так как необходимо, чтобы сайт отображался во всех популярных браузерах);
• большое количество бесплатных компонентов (например, редакторы новостей, компонент многоязычной поддержки сайта, компонент поиска, карта сайта и много другое), модулей (модули меню, модули вывода последних новостей и т.д.) и плагинов (универсальные дополнения, которые расширяют стандартные возможности Joomla! сms и служат решением узких задач, например, это могут быть дополнительные кнопки в визуальном редакторе или плагин обрамляющий все внешние ссылки в теги nofollow и noindex);
• большое количество готовых бесплатных графических шаблонов;
• простота установки данной CMS на хостинг;
• быстрота работы сайта.

 

Шаблон:

     Свою  работу я начал с установки  дистрибутива на локальный хостинг. Это шаг является необходимым для более эффективной настройки сайта (тестирования на работоспособность всех компонентов, модулей, плагинов).

      После установки необходимо было, согласной  заданной структуре сайта, создать  шаблон.

 
 
 
 
 
 
 
 
 
 
 
 
 

Рис. 1 Примерное расположение модулей

 

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

 

Структурная часть

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

 

Размеры страницы

      По  заданию было необходимо реализовать сайт, который корректно работает в разрешениях 1024*768 и 1280*1024.

      Ширина  самой страницы составила 978px плюс по 1px на рамку по периметру страницы, высота изменяется в зависимости от содержимого страницы.

      Горизонтальное  меню имеет ширину 978px и высоту 25px.

      Ширина  модулей составила 244px, высота изменяется в зависимости от содержимого контейнера.

      Ширина  контентной области составляет 670px, высота изменяется в зависимости от содержимого.

      Ширина  шапки составляет 978px, а высота 150px.

      Ширина  нижнего баннера с контактной информацией составляет 978px, а высота равна 90px.

 

Многоязычность

      Было  необходимо реализовать многоязычность сайта. Существует несколько путей решения этой проблемы:

1. Создание двух разноязычных сайтов на двух разных доменах третьего уровня (www.ru.ipcet.ru и www.en.ipcet.ru).
2. Создание двух разноязычных сайтов на одном домене второго уровня, но в разных папках (www.ipcet.ru/ru/ и www.ipcet.ru/en/).
3. Создание одного мультиязычного сайта с использованием дополнительных средств.

Первый  вариант:

            Этот вариант не подходит, так как у нас уже  имеется домен второго уровня, который фигурирует на документах и  сайтах РАН.

Второй  вариант:

            Этот вариант не подходит, так как он требует больших  затрат сервера.

Третий  вариант:

            Наиболее оптимальный. Реализуется с помощью готового компонента Joomfish. Данный компонент является бесплатным, не слишком нагружает сервер и способен поддерживать одновременно до 30 языковых версий.

 

Web-Дизайн

    Как известно, web-дизайн во многом определяет успешность того или иного ресурса. Судьба сайта зависит от того, насколько он соответствует предъявляемым требованиям, то есть от того, насколько у него качественный дизайн. Хороший Интернет-сайт должен с первых секунд заинтересовывать пользователя, располагать его к себе, чтобы тот с изумлённым лицом первооткрывателя вновь и вновь щёлкал по ссылкам, открывая один раздел за другим. Но удивить и заинтересовать – это полдела. Правильный web-дизайн просто обязан учитывать ещё и тот факт, что сайт является представительством, лицом организации в сети Интернет. При всём при этом нельзя забывать, что именно от дизайна напрямую зависит и такой показатель, как usability ресурса, то есть удобство навигации и понятность структуры. Это значит – визуальное оформление должно быть не только красивым и оригинальным, но, к тому же, и функциональным, чтобы пользователь не блуждал взглядом по монитору в поисках нужной информации.

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

     Было  предложено несколько вариантов  использования изображения гор:

• использование изображений в шапке сайта;
• использование изображений на заднем фоне сайта;
• использование изображений в фурнитуре сайта.

     Было  решено, дабы не нагружать страницу, использовать изображение гор в шапке сайта.

     Готовая эмблема Института проблем химико-энергетических технологий СО РАН не подходила к  дизайну сайта, по этому было решено немного исправить её цветовую схему.

 

Многоплатформенность

     Сейчас, в отличие от предыдущих лет, растёт популярность разных видов браузеров. Если ещё 5 лет назад большинство  пользователей использовали только IE5, то сейчас количество браузеров исчисляется десятками. Появились новые версии популярного Internet Explorer’a, Mozilla FireFox, Opera, Google Chrome и многие другие. Этот факт заставляет разработчика ориентироваться не только на самый популярный браузер, но и его конкурентов.

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

      Если  Opera, Chrome, FireFox и IE7 относительно одинаково отображают стили страниц (CSS и HTML), то IE6 является главным мучителем.

Включение поддержки альфа-прозрачности у PNG

     Одним из самых печальных дефектов в IE6, является отсутствие поддержки 32-битной альфа-прозрачности у PNG-изображений. При отображении в браузере 32-битных альфа-прозрачных PNG, IE6 заменяет всю прозрачность на безобразный серый фон. К счастью, это хорошо известная и часто встречаемая проблема, для которой существует большое количество обходных путей и решений.

     Если  отложить в сторону запрет на использование  альфа-прозрачных PNG-изображений в целом, возможно, самый простой способ обеспечить визуальную совместимость с IE6 – это использовать полностью прозрачные PNG, которые полностью поддерживаются и правильно отображаются во всех браузерах, включая IE6.

     Наиболее  практичным подходом будет использование 8-битного, альфа-прозрачного формата  PNG, вместо обычного 32-битного формата. Чтобы его получить, можно использовать программу Adobe Fireworks (Photoshop этого не умеет), сохранить свое альфа-прозрачное PNG-изображение в 8-битном формате, и затем включить в свой дизайн, как обычно. 8-битные PNG, возможно, не так красиво выглядят как 32-битные версии, зато в IE6 они будут выглядеть, так же как и в других браузерах. Этот метод позволяет применять альфа-прозрачность во всех современных браузерах, без получения уродливого серого фона в IE6.

     Конечно, есть возможность включить в IE6 поддержку 32-битной альфа-прозрачности. Существует множество различных скриптов, включающих такую функциональность, но все они основываются на разработке Microsoft, фильтре AlphaImageLoader, который можно включить в ваш CSS-файл следующим образом:

* html .iepngfix { behavior: url(iepngfix.htc); }

     Чтобы заставить это работать, необходимо подключить iepngfix.htc и прозрачный gif файл размером 1*1px поместить в папку с CSS-файлами шаблона.

Исправление полей и отступов

     Ранние  версии Internet Explorer неправильно интерпретировали модель боксов, включая рамки и внутренние отступы при подсчитывании ширины контента. Например, взгляните на следующий случай:

     div {

     border: 10px solid black;

     padding: 10px;

     height: 100px;

     width: 100px;

     }

     В современных браузерах, высота и  ширина этого блока, будет рассчитана в соответствии со спецификацией W3C как 100px + 20px +20px = 140px. В ранних версиях IE, несмотря на это, и высота, и ширина, будет ошибочно рассчитана в 100px. Это различие отвечает за разработку множества несоответствий между соответствующими стандартам браузерами и старыми версиями Internet Explorer.

     К счастью, неправильная модель боксов была пересмотрена в IE6, который оказался способен возвратить правильную ширину для веб-страниц, включающих полный DOCTYPE. Когда присутствует полный DOCTYPE, IE6 включает один из двух «поддерживающий стандарты режим» или «почти поддерживающий стандарты режим», оба этих режима, позволяют IE6 правильно интерпретировать боксовую модель. Если же полный DOCTYPE не включен в веб-страницу, IE6 вернется в «quirks mode», и будет интерпретировать боксовую модель неправильно.

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

     Несмотря  на эти решения, могут возникнуть ситуации, когда необходимо точно контролировать высоту и ширину конкретных элементов. В этих случаях, мы можем использовать для этого «Tan Hack»:

     #selector {

       border: 10px solid black;

       padding: 10px;

       height: 100px;

       width: 100px;