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

Это лишь маленький практический “кусочек”, посвященный тому, как решить поставленную задачу. И еще один момент - вопрос, освященный здесь, не является таким уж сложным. Но первоочередная цель моего скромного сайта - служить записной книжкой для своего владельца. Поэтому все записи здесь можно рассматривать как вехи (milestones) в долгом пути верстальщика.

Пример с градиентным переходом на реальном psd-макете показан ниже:

Градиентный переход на макете

Видим, что имеется градиент, который “растянут” по горизонтали. Начинается он в левой крайней точке, затем имеется плавный переход цвета в центре, и в правой крайней точке снова возврат к прежнему цвету (как в левой крайней точке). Такие переходы оттенков называются цветовыми переходами

1
color stops
.

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

Наглядный пример цветового перехода градиента

Цветовые переходы являются “частью” CSS-свойства

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

Кстати, положение таких точек

1
color stops
можно задавать не только с помощью процентов, но и “жестко”, фиксированными величинами, такими как пиксели
1
px
.

Благодаря множественным цветовым переходам можно создавать красивые эффекты. Пример, показанный в самом начале, является “бледным” отражением того, на что способен CSS3. Другое дело, что на сегодняшний день браузеры поддерживают не все его возможности, но об этом немного ниже.

Итак, вернемся к градиентам на psd-макете. Мы разобрались, что из себя представляет такой цветовой переход. Осталось решить, как воплоить его в коде. Самый простой (надежный), удобный и быстрый способ - это воспользоваться замечательным online-инструментом “ColorZilla”.

Открываем его в браузере и видим изначально такую картину:

Инструмент ColorZilla

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

1
color stops
. Можно передвигать их по горизонтали, тем самым изменяя местоположение цветового перехода в градиенте.

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

1
color stops
(помимо двух крайних), которые можно удалить с помощью кнопки “Delete”.

Берем с помощью пипетки цвета градиентов с psd-макета:

Цветовые переходы на макете Photoshop

и переносим их на online-генератор. Последовательно, слева направо. Для этого выбираем на панельке ColorZilla

1
stop colors
, одинарным щелчком мыши выбираем окошко Color и в диалоговом окне (кстати, очень похожем на такое же в Photoshop) вставляем цвет. В результате получаем необходимый цветовой переход:

Созданный цветовой переход

В окне “Preview” виден готовый результат, а в окне CSS - готовый CSS-код. Его можно скопировать и вставить в свой проект.

Аналогично online-генератору Colorzilla, можно воспользоваться еще одним, подобным - “CSSMatic”:

Online-генератор CSSMatic

Конечно, создавать цветовые переходы с помощью CSS-кода правильно во всех отношениях. Это правильно с точки зрения семантики, с точки зрения стандартов, с точки зрения быстроты загрузки сайта. Есть только одно но - не все браузеры “успевают” за стремительным развитием стандартов. Поэтому в таких браузерах подобные красивости не будут отображаться.

Есть такой замечательный сайт под названием “What can i use” (“Что я могу использовать”), на котором можно проверить, какой браузер и какой версии поддреживает то или иной CSS-свойство. Давайте откроем его и посмотрим, как обстоит дело с нашим градиентным переходом в браузерах:

Поддержка CSS Gradient в браузерах

Видим, что практически во всех он будет отображаться. Кроме одного - Internet Explorer v8 и Internet Explorer v9. Так что пользователи “ослика” не увидят всех красивостей.

На этом краткая статья по градиентам окончена.


При верстке одного макета столкнулся с таким вопросом. Имеется блок-баннер, у которого заданы границы

1
border
и
1
padding
. Внутри этого блока располагается блок с текстом. Этот блок позиционируется абсолютно относительно своего блока-родителя.

При задании CSS-параметров абсолютного позиционирования у меня возник вопрос - отчего же отсчитывается позиционирование для внутреннего блока? От границы

1
border
или
1
padding
внешнего блока?

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

Абсолютное позиционирование

Ниже все же в двух словах опишу картинку.

Итак:

  • внешний блок
    1
    
    div
    имеет границу border шириной 10px,
    1
    
    padding
    размером 20px и относительное позиционирование;
  • внутренний блок
    1
    
    div
    имеет абсолютное позиционирование -
    1
    
    top: 40px
    и
    1
    
    left: 40px
    .

Так вот, внутренний блок позиционируется абсолютно внутри внешнего блока-родителя по его границе. При этом отступ

1
padding
роли не играет, он не учитывается совсем. Вот и выяснил для себя этот вопрос.

На этом все.


Являюсь “счастливым” обладателем сего чуда техники. И все было хорошо до вчерашнего дня, когда по причинам, для меня совсем не ясным, сей модем перестал работать. Просто не мог подключиться к Интернету. То есть, как показывало окно “Diagnostics”, он честно пытался подключиться к местному ISP, но тот его упорно “отфутболивал”:

DLink 2600 BRU

Первым делом перебил настройки в модеме – пароль, логин и т. п. Результата не дало. На следующий день отправился в местное отделение моего провайдера с вопросами. Там сказали, что настройки (парольлогин – в частности), они сами не могут видеть (???) и проверитьвыдать его мне, соответственно. Посоветовали принести модем, чтобы они сами попробовали подключить его и проверить.

Как честный idioto vero, отнес я модем к ним. “Специалист” подключил его, вбил мои же настройки и сказал – да, он у Вас не подключается. Затем мило выписал квитанцию на 100 рублей за “сервисное тестирование”. Единственным решением проблемы, которое приходило в голову, было – перепрошить модем. Итак, с чего начинаем.

  1. Нужно точно определиться с аппаратной ревизией нашего модема. Увидеть ее можно, перевернув его кверху “пузом”. На задней стороне имеется наклейка наподобие такой:

Этикетка с версией аппаратного обеспечения DLink 2600 BRU

Здесь строка

1
H/W Ver.:A1
и есть та самая аппаратная ревизия. Зачем нужна такая точность с ней? Затем, что если выбрать прошивку не для того “железа”, в итоге можно получить кусок металлолома. Вторая строка –
1
F/W Ver. RU_1.00
(у меня было) является версией прошивки. Это заводская прошивка.

  1. С именами определились. Теперь надо скачать прошивку. Все они находятся на ftp-сервере фирмы-производителя D-Link –

    1
    
    ftp://ftp.dlink.ru/pub/ADSL/
    . Единственное затруднение у меня вызвало то, что для ревизии
    1
    
    А1
    там не было ничего. Только для ревизии
    1
    
    С
    и для ревизии
    1
    
    С2
    . После общения на форумах выяснилось, что можно смело брать прошивку от ревизии
    1
    
    С
    для
    1
    
    А1
    . Скачиваю ее и затем распаковываю.

  2. Подключаю модем по кабелю, набираю в строке браузера

    1
    
    192.168.1.1
    . После ввода пары логинпароль попадаю в административную панель модема. Перехожу в “Management - Update Software”:

Обновление прошивки DLink 2600 BRU

Здесь выбираю, где лежит скачанная мною прошивка и нажимаю кнопку “Update Software”. Процесс пошел.

  1. После завершения захожу в “Management - Settings - Restore Default” и сбрасываю настройки модема до заводских:

Сброс настроек DLink 2600 до заводских

  1. Перехожу в “Device Info” и смотрю версию прошивки:
    1
    
    Software Version RU_1.23
    . Все ОК. Прошивка встала:

Проверка текущей версии прошивки модема

  1. Осталось только вбить настройки, данные ISP. Для WAN:

Настройка Интернет-соединения на DLink 2600 BRU

Проверить, что все работает. И затем настроить WiFi:

Настройка wifi-соединения на модеме

  1. По завершении нелишним будет сделать backup настроек модема:

Резервная копия настроек DLink 2600 BRU

P.S.

После перепрошивки скорость заметно (видно даже на глаз) возросла.

P.S.S.

На ftp-сервере имеется также раздел “Software” для этой модели модема. Там находится утилита конфигурирования DCC_DSL-2600U. Ее предназначение – настройка модема (wizard) для подключения к местному провайдеру (ISP) по VCI, VPI, login, password (то есть, те данные, которые провайдер предоставляет в заключенном договоре).

С помощью нее можно сделать тоже самое, что и через web-интерфейс по кабелю Ethernet – настроить модем на подключение к Интернету. Другими словами, такую настройку можно производить двумя способами:

  • классический – через web-интерфейс (браузер)
  • с помощью утилиты DCC_DSL-2600U (сам не пробовал, ибо нужды в лишнем софте не вижу)

P.S.S.S.

По заявлению на сайте производителя D-Link, модем DSL-2600U/BRU/C (DSL-2600U H/W Ver. A1 – его еще более древняя версия) уже снят с производства. Заменой ему является DSL-2600U/BRU/C2:

DSL-2600U BRU C2

На этом все.


Удаление плагинов или модулей в Joomla 2.5 производится так же просто, как и их установка.

Для этого нужно перейти в меню “Менеджер расширений” и в нем перейти на вкладку “Управление”. Joomla отобразит список всех установленных модулей и плагинов в системе.

Достаточно выбрать нужный плагин или модуль из списка и отметить его галочкой. Теперь поднимаем взгляд в правый верхний угол окна и видим там кнопку “Деинсталлировать”:

Деинсталлировать плагин в Joomla 2.5

Нажимаем на нее и система производит деинсталляцию выбранного плагина.

На этом все.


На сегодняшний день многие популярные web-студии, создающие шаблоны под CMS Joomla, помимо самих шаблонов создают пакеты QuickStart. Что это такое и для чего предназначено?

На самом деле все просто. Шаблоны, выполненные такими профессиональными студиями, как GavickPro и другие, являются чуть ли не произведениями исскуства. Помимо чистого дизайна, такие шаблоны обладают поистине устарашающим набором дополнительных “примочек”, расширяющих его возможности. Эти дополнительные “навороты” могут быть общеизвестными (K2) или же являться фирменной разработкой самой студии.

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

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

Пакет QuickStart представляет из себя уже развернутую и готовую к использованию Joomla. В ней программистами на студии-разработчике заранее устанавливается шаблон со всеми необходимыми дополнениями. И производится настройка самого шаблона, чтобы он работал именно так, как было задумано. Чтобы не страдал от кривых рук неумелых пользователей. Потом все это хозяйство запаковывается в обычный zip-архив - и все, пакет QuickStart готов!

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

Давайте на практике разберемся, как установить и настроить шаблон Joomla QuickStart на примере работы студии ZOOTemplate и ее шаблона ZT Futa.

После скачивания шаблона получаем архив весом больше 20 Mb. Великовато будет для шаблона, не правда ли? Распаковываем этот архив и видим, что на самом деле он состоит из двух файлов, которые тоже, в свою очередь, являются архивами:

  • zt_futa25_installpackage.zip
  • zt_futa25_quickstart.zip

Распакованный архив шаблона ZT Futa

Первый файл -

1
zt_futa25_installpackage.zip
- собственно сам шаблон. А вот второй файл -
1
zt_futa25_quickstart.zip
- это и есть QuickStart, на что недвусмысленно указывает само его название, которое у разных производителей может отличаться. Но практически у всех в названии шаблона будет присутствовать слово
1
quickstart
.

Теперь нужно подготовить хостинг. У меня это локальный хостинг XAMPP. Запускаю его, перехожу в панель управления базами данных phpMyAdmin и создаю новую базу данных под будущий сайт “ZT Futa”:

База данных ZT Futa

Перезапускаю MySQL, перехожу в TotalCommander по пути

1
c:\Xampp\htdocs
и создаю папку
1
zt_futa.lc
. В ней будет размещаться будущий сайт.

Распаковываю архив

1
zt_futa25_quickstart.zip
в папку
1
c:\Xamppht\docs\zt_futa.lc
. Посмотрим, что получилось в результате:

Распакованный архив ZT Futa QuickStart

Даже по структуре каталогов и файлов видно, что это именно распакованная Joomla. Теперь осталось только установить ее.

Установка стандартная и ни чем не отличается от обычной “чистой” Joomla. Приведу пошаговое описание установки в картинках:

Установка ZT Futa Шаг 1

Установка ZT Futa Шаг 2

Установка ZT Futa Шаг 3

Установка ZT Futa Шаг 4

Установка ZT Futa Шаг 5

Установка ZT Futa Шаг 6

Установка ZT Futa Шаг 7

И смотрим результат:

ZT Futa Green

На этом все.