Category Archive: Создание сайтов

Subcategories: Нет рубрик

Выкладываем CMS на хостинг в бинарном режиме

Данная статья посвящена моему первому опыту работы с CMS системами. Как и любой начинающий веб-мастер, я сталкивался с такими проблемами, о которых просто не мог заранее знать. Уже при выкладывании своего первого сайта в интернете с системой управления я столкнулся с довольно простой проблемой.  Должен отметить, что данная проблема связана исключительно с системой управления MODx. Также возможно возникновение такой проблемы и на других CMS. Проблема заключалась в том, что вес исходных файлов CMS и уже закаченных отличался по размерам. И из-за этого было невозможно запустить установку.  При закачке файлов сначала я пользовался интерфейсом хостинга для доступа к серверным папкам, где хранится сайт. Но как оказалось, файлы CMS необходимо выкладывать на хостинг в бинарном режиме. Некоторые FTP интерфейсы позволяют добавлять файлы прямо из архива и тогда проблемы не возникает. Но если данной опции на хостинге нет, то в решения данной проблемы можно воспользоваться TotalCommander, который позволяет устанавливать  файловую связь с сервер-хостингом. Итак по порядку:

А)для начала необходимо настроить соединение с хостинг-сервером

Запускаем TotalCommander и открываем вкладку Сеть. Далее выбираем в выпадающем меню Соединиться с FTP-сервером.

В появившемся меню выбираем пункт Добавить….

Имя соединения: произвольное

Сервер (Порт): берется с хостинга (например, 78.178.78.78)

Учетная запись: берется с хостинга (например, f78787)

Пароль: берется с хостинга (обычно его можно изменить на самом хостинге)

После того как поля заполнены жмем «ОК»

Б) проверяем настройки

В настройках программы должен стоять во вкладке FTP пункт Режим по умолчанию: Двоичный

В) теперь можно проверить соединение

Теперь заходим обратно в пункт Соединиться с FTP-сервером и выбрав наше только что созданное соединение нажимаем Соединиться. Если все данные были введены верно, то соединение должно установиться.

Г) переносим файлы на хостинг

Ну перенести файлы в соответствующий раздел думаю не составит труда :)

Основные теги , , ,

MODx установка

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

Сначала необходимо обозначить требования к хостингу, на который будем ставить нашу CMS

  • поддержка PHP;
  • наличие СУБД MySQL.

По сути это главное что должно быть (после головы, конечно   )

Теперь необходимо загрузить исходные файлы MODx

Сделать это можно на официальном сайте по адресу http://modxcms.com/download/

Далее закачиваем исходные данные MODx на хостинг-сервер

Закачать файлы на сервер можно при помощи веб-интерфейса FTP (обычно таковой присутствует на хостинге), либо закачать при помощи дополнительного програмного обеспечения, например TotalCommander (как закачать файлы на FTP при помощи TotalCommander?).

Отлично! Теперь набираем в браузере www.имя_вашего_сайта/install/

Если все сделано правильно, то откроется окно  установки   MODx  и предложит установить  MODx . Мы конечно же соглашаемся и кликаем «Install now».

Выбираем язык. Конечно же «русский»

Теперь нам предложат выбрать тип  установки . Будем считать что у нас новая установка и выбираем пункт Новая установка и жмем Далее (не пугайтесь что у меня на картинках язык английский, просто по аналогии я использовал картинки с дружественного ресурса http://www.1two.ru/

В следующем окне необходимо ввести данные доступа к базе данных для установки. Эти данные можно взять на хостинге. Обычно они находятся в разделе Управление СУБД MySQL. После этого необходимо проверить соединение с хостингом.

Если все вышеуказанное сделано правильно, то вы увидите следующие окно, где вам предложат ввести имя базы данных, префикс таблиц в базе и выбрать кодировку сайта. Обычно я работаю в UTF-8 (не забудьте проверить кодировку на сервере-хостинге – они должны совпадать). Далее проводим тест базы данных и задаем данные пользователя административной части.

Здесь основная работа заканчивается. Далее вам будет предложено выбрать компоненты для  установки . Оставляем по-умолчанию.

Поздравляю! Вы установили CMS MODx на свой хостинг .

Сайт будет доступен по адресу www.имя_вашего_сайта/

Административная панель расположена по адресуwww.имя_вашего_сайта/manager

Для входа в панель используйте ранее заданные параметры пользователя.

Основные теги , , , ,

Шаблоны MODx. Создание простого шаблона

Сложно найти другую систему управления, которая была бы так же удобна в настройке и изменении дизайна сайта. Несмотря на то, что система управления работает с динамическим контентом, можно достаточно успешно “натянуть” на MODx любой HTML-шаблон. Для этого необходимо вставить в нужные места специальные теги MODx.

Простой шаблон для MODx выгладит примерно так:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />

<title>[*pagetitle*]</title>//выводит title страницы. Сам заголовок прописывается  в панели администрирования

<base href=”[(site_url)]“></base>//устанавливаем базовый URL

<style type=”text/css” media=”screen” >

…………..//здесь описаны стили

</style>

</head>

<body>

<div id=”header”>

<div id=”menu”>

[[Ditto]]//плагин, который выводит активное меню

</div>

</div>

<div id=”content”>

<h2>[*longtitle*]</h2>//выводит заголовок страницы в документе

[*#content*]//выводит содержимое документа

</div>

<div id=”bottom”>//так называемый “подвал” для счетчиков, копирайта и т. д.

</div>

</body>

</html>

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

Основные теги , ,

Специальные теги MODx для создания шаблона

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

Приведенные теги написаны так, как они должны быть вписаны в шаблоне.

Системные теги

[(site_name)] – название сайта

[(base_url)] или [(site_url)] – адрес сайта

[(modx_charset)] – используемая кодировка

[^qt^] – время на запросы к базе данных

[^q^] – запросов к базе данных

[^p^] – время на работу PHP скриптов

[^t^] – общее время на генерацию страницы

[^s^] – источник содержимого (база или кэш)

Стандартные

[*pagetitle*] – заголовок документа

[*longtitle*] – расширенный заголовок документа

[*description*] – описание документа

[*introtext*] – аннотация документа

[*content*] – содержимое документа

[*alias*] – псевдоним документа

[*id*] – идентификатор (номер) документа

[*pub_date*] – дата публикации дкоумента

[*unpub_date*] – дата завершения публикации

[*createdby*] – Идентификатор пользователя создавшего документ

[*createdon*] – Дата создания документа

[*editedby*] – Идентификатор пользователя редактировавшего документ

[*editedon*] – Дата редактирования документа [~идентификатор~] – URL указанного документа

Дополнительные

[*type*] – вариант (документ, папка или ссылка)

[*contentType*] – тип содержимого (например, text/html)

[*published*] – опубликован ли документ (1|0)

[*parent*] – номер (ID) родительского документа

[*isfolder*] – является ли документа папкой (1|0)

[*richtext*] – используется ли при редактировании документа визуальный редактор

[*template*] – номер (ID) используемого шаблона для документа

[*menuindex*] – порядковый номер отображения в меню

[*searchable*] – доступен ли документ для поиска (1|0)

[*cacheable*] – Кэшируется ли документ (1|0)

[*deleted*] – Документ удален (1|0)

[*deletedby*] – Идентификатор пользователя удалившего документ

[*menutitle*] – Заголовок меню. Если не используется, то заголовок документа

[*donthit*] – Слежение за количеством посещений отключено (1|0)

[*haskeywords*] – Документ содержит ключевые слова (1|0)

[*hasmetatags*] – Документ имеет метатеги (1|0)

[*privateweb*] – Документ входит в частную группу пользовательских документов (1|0)

[*privatemgr*] – Документ входит в частную группу менеджерских документов (1|0)

[*content_dispo*] – Вариант выдачи содержимого (1 – для отображения | 0 – для скачивания)

*hidemenu*] – Документ не отображается в меню (1|0)

Основные теги , ,

MODx – самая гибкая система управления сайтом

Было время, когда я создавал свой первый сайт в блокноте. Вначале такой навык был очень интересен и, в то же время, полезен для меня, как для начинающего веб-мастера. Но после того, как я сделал в блокноте с десяток сайтов, начали посещать мысли перейти на систему управления сайтом. Особенно когда дело касалось редактирования уже готового сайта. Ведь в готовом сайте уже не одна, много страниц с готовым контентом. И исправлять однообразно страницы стало не совсем удобно. Тогда-то я и столкнулся со своей первой CMS.

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

MODx  – CMS, на мой взгляд, являющаяся самой удобной в использовании для двеб-мастера. Гибкость данной системы не знает границ   Самолично сделал на «модэксе» несколько десятков сайтов. И хотел бы перечислить основные достоинства этой системы:

  • простота создания шаблона и настройки дизайна. «Натянуть» дизайн на данную системы не составит труда веб-мастеру среднего уровня (как я:-)). Достаточно лишь создать страницу в формате HTML и добавить туда несколько управляющих тегов. Так же есть поддержка CSS шаблона, соответственно. А если вы решите обновить дизайн сайта, то настройка нового дизайна не займет много времени.
  • управление META-тегами страниц. Для каждой страницы администратор может настроить свои уникальные META-теги.
  • дружественные URL для страниц. Благодаря всему этому, поисковики хорошо отнесутся к вашему сайту и позволят получить хорошие позиции в выдаче результатов. За это многие разработчики прозвали  MODx  как «SEO-ориентированная система управления сайтом»
  • никаких проблем с индексированием страниц. В этом убедился на собственном опыте.
  • она абсолютно БЕСПЛАТНА. Думаю это в комментариях не нуждается.

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

Хочу заметить, что здесь изложено личное мнение автора и оно может не совпадать с мнениями других лиц:-)

Основные теги , ,

Скрипт поиска по сайту с прокруткой на JavaScript

Недавно копался в интернете в  поиске  простенького  скрипта  поиска по странице для одного сайта. Как ни странно, ни одного рабочего готового скрипта не нашел. В основном проблема заключалась в отсутствии кроссбраузерности (скрипт работает вInternetExplorer, но не работает в Mozilla). Одна из причин – это устаревшие страницы с постами по JavaScript в поисковой выдаче. Но так как скрипт мне был необходим, то пришлось «точить» его самому.

Задумка такова:

  • скрипт ищет совпадения на странице и выделяет их другим цветом;
  • после того как совпадения найдены – крутим страницу до первого совпадения.

Скрипт получился довольно простой. Принцип работы такой:

  • ищет совпадения на странице;
  • выделяет найденные совпадения другим цветом и обрамляет найденный текст ссылкой-якорем;
  • прокручивает страницу до первого якоря.

Наш скрипт будет состоять из двух частей.

  • Вставляем кусок скрипта между тегами <head>…</head> страницы

<script language=»JavaScript»>

function findInPage(str) {

var pattern = new RegExp(«[^value=\"](«+str+»)», «gi»);

var txt = document.body.innerHTML;

if( str==»” || !pattern.test(txt) ) {

alert(«Совпадения не найдены. Повторите поиск.»);

return 0;

}

txt = txt.replace(pattern, «<span style=’color : red;’><a name=’search’> $1</a></span>»);

document.body.innerHTML = txt;

location.replace(‘страница_поиска.html#search’);

}

</script>

  • В тело документа между тегами <body>…</body> вставляем форму поиска:

<div id=»vivod»></div>

<strong><span style=’font-size: 10px;’>Перед поиском новой позиции необходимо нажать «Сброс»</span></strong>

<form id=»search»>

<input name=string onChange=»n = 0;» value=»” size=35 >

<input name=»button2″

onClick=»location.reload();» value=»Cбросить»>

<input name=»button»

onClick=»findInPage(this.form.string.value);» value=»Найти»>

</form>

Пример работы скрипта можно посмотреть здесь.

На мой взгляд, реализация с якорями есть самая простая. Как раз то, что мне и было нужно. Если кому то данный скрипт пригодиться – рад помочь.

Основные теги , ,