8 основных шагов при создания публикаций
|
Эта статья адресована команде авторов нашего сайта и прежде всего ее новым участникам. Вполне возможно, что-то в этой статье покажется кому-то новым и непонятным, хотя я предполагаю, что вещи в ней изложены простые и для понимая не требующие никаких особых знаний - квалификации пользователя интернета среднего уровня будет вполне достаточно. Здесь описаны требования и рекомендации основанные на желании сделать Ваши публикации красивыми, понятными и не вступающие в противоречие с дизайном сайта, не нарушающие его структуру. |
Стартовые требования, которые необходимо усвоить перед началом какой-либо работы с публикациями:
Google Blogger - довольно серьезный движок предназначенный для создания блогов, сообществ, сайтов. Его функционал выходит далеко за пределы запросов владельцев "дневника о котиках". Но он так же пригоден и для них, а потому имеет режим визуального создания постов. В нашем проекте его использовать нельзя. Данными правилами это запрещено. И начинать работу над своими публикациями Вам надлежит только режиме кода HTML. Поэтому, если вы создаете публикацию на нашем сайте впервые, вы должны убедиться, что у вас активирован именно HTML-режим создания сообщений и что окно создания сообщений выглядит именно так, как показано на следующем ниже скриншоте:
Обратите внимание, что в окне сообщения уже есть какой-то код - это заготовленный мною шаблон Вашего будущего сообщения. Он сделан для того, что бы все сообщения на сайте имели однообразную шапку, видимую в ленте сообщений. Если Ваш первый визит в редактор сообщений состоялся в режиме "СОЗДАТЬ", а не HTML, перейдите в режим HTML и выйдите из редактора. Если при этом сообщение уже инициировалось в виде черновика, то найдите его в списке сообщений (оно будет самым верхним) и удалите. Ничего опасаться не стоит - удалить чужое сообщение Вы не сможете. Но скорее всего, если Вы ничего не предпринимали кроме создания нового сообщения, не вводили никакой текст в поле в дополнение к уже существующему в нем коду, то сохраниться черновиком оно не должно. Поэтому пожелание удалить "случайный блин" чисто подстраховочное.
Итак, Вы вновь вошли в редактор через кнопку "Создать сообщение" и теперь уже у Вас активен режим HTML - он и далее будет активен, если вдруг не перейти в режим "Создать", в который Вы не должны переходить ни при каких обстоятельствах - для меня, Вас и всех соавторов данного сайта эта кнопка запрещенная.
Переходите на вкладку "Настройки сообщения" в опцию "Параметры" и проверяете расположение "галочек". Если они выставлены иначе, чем на картинке выше, задайте им правильное расположение и нажмите кнопку "Готово".
Что Вы сделали сейчас?
- разрешили комментировать Ваше будущее (это и последующие) сообщение
- запретили движку сайта по-своему интерпретировать введенный Вами код
- отказались от помощи в создании переносов и пустых строк - это Вы будете делать сами используя теги <br> и <p>
Теперь все Ваши сообщения будут создаваться с этими настройками. И менять их в будущем не нужно.
Вот теперь Вы готовы к созданию Вашей первой публикации на сайте «ELECTRONICA : Синтезаторы, рабочие станции, электронная музыка».
ШАГ ПЕРВЫЙ | Заголовок
Введите в поле заголовка название Вашей публикации и скопируйте его еще в три места:
- в поле ввода опции "Описание для поисковых систем" (и нажмите готово)
- между кавычками параметра title в коде шаблона
- между кавычками параметра alt в коде шаблона
ШАГ ВТОРОЙ | Опознавательная картинка
У Вас должна быть заготовлена специальная картинка 200x200 пикселей (допускается немного большего размера, но обязательно квадратная) являющаяся "опознавательной картинкой" вашей статьи - именно ее увидят посетители сайта в ленте новых публикаций сразу после названия статьи. Я надеюсь, что у Вас в компьютере установлен какой-нибудь графический редактор с помощью которого вы придадите такой картинке соответствующие размеры, и что Вы умеете им пользоваться. Будет очень удобно назвать картинку "созвучно" с названием статьи, но лаконично - одним словом - без пробелов, черточек, подчеркиваний и русских букв - только латинские буквы и арабские цифры - известное правило в интернете.
Кликаете мышкой в пустое место окна с кодом, далее кликаете в иконку загрузки изображения, находите его в своем компьютере (а не где-нибудь в Интернете) и загружаете следуя обычной процедуре, выбирая пункты "Не выравнивать" и "Исходный размер".
Движок сайта создаст код вставки данной картинки (с активной ссылкой на нее же саму) в том месте, куда вы перед этим поставили курсор.
Нам не нужен весь этот фрагмент кода. Нужен только адрес картинки. (Между прочим только что движок сайта загрузил эту картинку в Ваш личный фотохостинг в Вашем аккаунте Гугла в специально отведенную для публикаций этого сайта папочку и если Вы ее потом там найдете - имейте в виду - удалять ничего оттуда нельзя - в противном случае ваши публикации на этом сайте могут остаться без иллюстраций). Остальной код чуть позже придется удалить. Поэтому я и рекомендовал ставить курсор на почтительном расстоянии от какого либо текста, что бы при удалении не зацепить ничего лишнего.
Но сейчас Вам надо выделить курсором отмеченный красным цветом адрес только что загруженного изображения и скопировать его между кавычками параметра src в теге img - немного выше в коде шаблона, как показано на скриншоте:
А более не нужный полный код вставки изображения (недавно созданный движком) удаляем.
ШАГ ТРЕТИЙ | Создание постоянного адреса статьи
В только что скопированном адресе картинки выделяем курсором только ее название - то самое одно слово, без расширения, точки и прочих рядом стоящих символов. И копируем его в поле ввода опции "Постоянная ссылка" -> "Пользовательская постоянная ссылка".
И нажимаем "Готово". Вашей публикации теперь присвоен строго определенный адрес. Он отображается серым цветом в опции "Постоянная ссылка" и его надо оттуда скопировать.
Но не полностью. Только от слэша следующего за доменной зоной адреса сайта до расширения html включительно. И вставить эту часть адреса публикации в адрес перехода активной ссылки связанной с недавно вставленным изображением. Для лучшего понимания смотрите скриншот ниже:
Объясняю наши действия:
По этой ссылке посетитель перейдет из ленты сообщений (в которой от каждой статьи лишь картинка 200x200 и первый абзац) в полную версию Вашей статьи, если заинтересуется ею и кликнет по картинке. Но адрес ссылки отсчитывается от корневой директории хостинга домена на котором расположен этот сайт не упоминая сам домен. И это дает нам возможность в будущем изменить адрес сайта на какой-нибудь другой - более удачный, например - или перебраться с домена третьего уровня на домен второго уровня. Переписывать все ссылки во всех публикациях при этом не придется. Имейте это в виду, если в тексте Ваших следующих статей будут задуманы ссылки на другие материалы этого сайта - на другие Ваши статьи или страницы - ссылаться на них надо подобным образом - начиная со слэша, но без указания протокола http, домена сайта и доменной зоны.
ШАГ ЧЕТВЕРТЫЙ | Вступительный абзац
Дизайн сайта задуман так, что справа от опознавательной картинки посетители видят и вступительный абзац статьи. Из соображений разумной экономии экранного пространства при просмотре содержания сайта большая часть текста статьи спрятана из ленты новых публикаций, но этот первый абзац призван в некоторой степени дать понять читателю, о чем в статье идет речь.
Объем этого вступительного текста ориентировочно допустим в пределах 550 символов или около 80 слов. Разумеется, нет необходимости считать каждую букву или слово, но все же желательно добиться в конечном итоге такого результата, при котором высота данного текстового блока не будет превышать высоту картинки рядом с ним (200 точек). Лучше сделать этот абзац короче, чем длине. А успешность попыток будет улучшаться с опытом - с каждой новой статьей Вы все точнее будете оценивать тот или иной фрагмент текста по данному критерию.
Но как понять, что у нас получилось, ведь интерактивным режимом создания публикаций пользоваться нельзя? - для просмотра текущего вида публикации есть кнопка предварительного просмотра и ею надо пользоваться.
Скопируйте текст вступительного абзаца вашей статьи в пространство после кода служебного комментария возвещающего, что...
<!--разместить тут первый абзац статьи, дающий представление читателю о ее теме-->как показано на скриншоте ниже:
При Вашем нажатии на кнопку предварительного просмотра движок сайта открывает в новом окне нефункциональный вид того, что у Вас уже получилось - кликать по ссылкам или еще что-то делать с этим окном просмотра не выйдет, но понять правильность верстки статьи можно.
Вот как это выглядит на данном этапе у меня:
Меня вполне устраивает что текст вступительного абзаца доходит лишь до середины опознавательной картинки - это нормально. После просмотра окно предварительного просмотра можно закрыть. И при необходимости открыть вновь. Обратите внимание, что движок сам периодически сохраняет текущую версию статьи.
ШАГ ПЯТЫЙ | Вставка остального текста
Теперь пришло время вставить остальную часть текста. Разместить его надо после кода служебного комментария как раз его местоположение определяющего:
<!--разместить тут весь остальной текст статьи с иллюстрациями и прочим контентом-->Но, об иллюстрациях - наш следующий шаг. Здесь мы вставляем только текст и было бы очень хорошо, если бы этот текст содержал пометки - где будут располагаться иллюстрации к статье.
Реализовать эти пометки можно с помощью уже знакомого Вам служебного комментирования - текста заключенного между угловыми скобками, двумя парами дефисов и восклицательным знаком в начале (по аналогии с тем, как это здесь уже использовалось). Этот текст не будет отображаться для читателей статьи, но вам будет помогать разбираться в коде, сообщая, какой из фрагментов кода за что отвечает и что в данном месте предполагается еще разместить.
ШАГ ШЕСТОЙ | Вставка иллюстраций
Картинки к статье у вас уже должны быть где-то подготовлены. И было бы совсем хорошо, если бы они были пронумерованы именно так, как это указано в служебных комментариях. Так Вы точно не перепутаете их.
Важным моментом является размер иллюстраций.
В данной версии дизайна сайта допускается вставка иллюстраций до 720 точек по ширине. Конечно, идеальный вариант представляют иллюстрации специально созданные с такими размерами - 720 пикселей по ширине. Но у вас могут оказаться в наличии иллюстрации как меньших, так и больших размеров.
Загрузка и размещение тех и других не отличается. Но после загрузки могут потребоваться некоторые действия. Главное - что бы Вы сами знали, какие иллюстрации могут "вылететь" за предельно допустимый размер в 720 точек по ширине. В прочем, опция предварительного просмотра поможет Вам это заметить вовремя. Так же не будет катастрофы, если вы заметите этот вылет сразу после публикации статьи и тот час же примите необходимые меры.
Загрузкой изображений вы уже занимались и все с новыми иллюстрациями происходит точно так же:
Ставите курсор в то место текста (между теми абзацами), где должна по вашему замыслу размещаться иллюстрация. Если место размещения отмечено служебным комментированием, можно поставить курсор впритык после него, на следующую строчку или через строчку, но так, что бы было ясно, что комментарий относится к данной вставке. Его кстати, после вставки иллюстрации можно удалить, но это совсем не обязательно.
Кликаете по иконке загрузки, выбираете очередную иллюстрацию, загружаете ее с теми же опциями (без выравнивания, исходный размер).
И далее переходите к новой точке размещения иллюстрации и все делаете точно так же.
Если Ваши иллюстрации не превосходят предельного размера по ширине, а точно равны по ширине 720 точек или имеют немного меньший размер (допустим 600 точек по ширине), то этот шаг можно считать сделанным.
Если картинки шире чем 720 точек, и, более того, по замыслу статьи они должны показывать читателю какие-то мелкие детали, которые не видны в уменьшенном виде, то потребуется сделать одно простое уточнение кода вставки иллюстрации - вписать ограничение показываемого размера для тех иллюстраций, для которых это имеет смысл. Сделать это лучше всего вместо "закрывающего" слэша в теге img, который на самом деле в данном коде не нужен, и движок сайта вписывает его туда чисто по недоразумению.
width="720px"
Вот образец:
ШАГ СЕДЬМОЙ | Разделение абзацев
Теперь, после каждого элемента статьи - абзаца текста, иллюстрации или еще какого-то объекта данной публикации надо вставить тег двойного переноса:
<p>
И он создаст пустую строку везде, где будет применен. Статья благодаря ему станет легко читаема.
Так же статье пойдет на пользу, если в начале каждого абзаца вставить следующую конструкцию:
Она добавит в начало абзаца красную строку.
ШАГ ВОСЬМОЙ | Назначение ярлыков
Каждая статья имеет свою тематику и какие-то характеристики, по которым ее можно автоматически систематизировать в тот или иной раздел. Для обозначения тематической направленности статьи и других ее характеристик служат так называемые в терминологии данного движка "Ярлыки". Еще их называют (более часто) - "Метки".
Тема меток особенная и требует отдельной пояснительной статьи. Но здесь я вкратце лишь упомяну, какие метки (ярлыки) Нужно проставить к данной статье, и как это сделать.
Справа от окна ввода кода на панели "Настройки сообщения" есть опция "Ярлыки". Если кликнуть по ее названию, то открывается поле ввода ярлыков (в него можно вписать недостающий), и ниже поля список уже кем-то созданных ярлыков.
Каждой статье надо повесить ярлык "СТАТЬЯ", "ИМЯ АВТОРА" (имя фамилия), "БРЕНД" и может быть даже "МОДЕЛЬ ИНСТРУМЕНТА".
Если ярлык уже значится в списке, по нему надо просто кликнуть и он окажется в окошке ввода. Если в спике нужного ярлыка нет, его можно вписать в поле самому. Для создания новых ярлыков используются только ЗАГЛАВНЫЕ БУКВЫ - это правило данного сайта.
После выбора всех нужных статье Ярлыков надо нажать на кнопку "Готово". И статью можно публиковать.
Вот, что получилось у меня в итоге следования этим ВОСЬМИ несложным шагам.
Статья : Синтезатор Korg micro X
Конечно, описывал я все эти процедуры, создавал подробные иллюстрации с подсвеченным разными цветами фрагментами кода целый зимний день. Но рассказывать всегда дольше, чем делать. Само исполнение этих шагов при подготовленном материале (текст + иллюстрации) занимает у меня от 3-х до 5-ти минут. При определенных навыках у Вас этот процесс будет занимать примерно столько же времени - совсем не много.
Комментарии
Отправить комментарий