Сайтостроение

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

 Не раз на практике возникала проблема когда поддомен какого-нибудь сайта начинал выдаваться с контентом "смежного" сайта установленного на сервере. При этом в почте можно было найти подобное сообщение:
"В результатах поиска найдены поддомены сайта igryplus.ru. Примеры: http://mail.igryplus.ru Если найденные поддомены не должны участвовать в поиске, закройте их от индексирования, следуя рекомендациям в Справке."
 Прямо скажу, ситуация не очень хорошая, так как поисковики такой контент воспринимают уже как нагромождение от уже имеющегося сайта. Поэтому исправляем ситуацию.

 Если есть проблемы с микроразметкой от shema.org в валидаторе Яндекса с ошибкой «Не выполнено обязательное условие для структурированных сниппетов творческих работ: поле description или articleBody отсутствует или пусто», то это лишь значит одно, то, что собственно и указано в ошибке. Значит надо прописывать описание к статьям и категории на странице. Так как за форматирование блога на странице отвечают сразу несколько файлов, то и править придется пару файлов.

 Когда веб мастер трясется над своим сайтом как над дитем, то само собой ему хочется чтобы и нос без соплей и памперсы поменяны. Ну, в общем, чтобы все на месте и как надо. Обтачивать странички сайта можно до идеала бесконечно и  долго. И одним из таких этапов может стать желание веб мастера открывать изображение на страничках поверх основной странички. То есть кликнул, на полупрозрачном фоне видно основную страничку, а поверх картинку, на которую кликнул. Называется это не иначе как Lightbox. Так вот, если у вас есть такая необходимость, для движка Joomla, то мы вам в этой статье поможем. Ведь именно здесь мы вас научим как можно реализовать Lightbox в Joomla с минимальными телодвижениями.

 Вместе с защитой сайтов совершенствуются и те и то, что пытается эту самую защиту взломать. Так можно сказать о капче для JComments движка Джумла. В свое время эта штатная капча удовлетворяла всем и вся, дабы чувствовать себя вполне защищенным от спама и не беспокоиться о постоянных нападках последнего на вашу почту. Такую защиту можно было бы сравнить с нападками от варваров на богатый город, который ой как им хочется разграбить и раздербанить по камушкам. Ведь спам-боты как и варвары не знают ни чувств жалости, ни меры, ни что более важно, целесообразности своего поведения. А порой, это даже не на благо тому, кто их выпустил на свободу, но разве нам от этого легче!?…

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

Как убрать ссылку копирайт JComments

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

Запрет индексации https версии сайта посредством .htaccess

В один прекрасный день вы заметили, что проиндексированных Яндексом (реже гуглом) страниц вашего сайта стало вдвое больше, чем существующих, причем в индексе помимо http теперь и https версия вашего сайта, которая совершенно не предназначена для пользователей и является копией основного сайта? Это вы вовремя спохватились. Еще немного, и Яндекс может принять https за основную версию сайта, а http сделает зеркалом или просто может начать выбрасывать дубли страниц сайта по http. Сайт станет хуже ранжироваться со всеми вытекающими последствиями. Уже? Ну, это тоже не беда и один из моих сайтов прошел через это.

Дабы сайт выглядел привлекательно для глаза пользователя, цвета необходимо подбирать обдуманно. Вы можете воспользоваться приведенной ниже таблицей цветов и подобрать удачные сочетания. В таблице указаны наименования цветов для верстки в HTML-редакторе или для таблиц стилей. Приведенные ниже 216 цветов считаются "безопасными" (browser-safe), то есть одинаково отображаются во всех браузерах.

Очень удобно иметь в поле зрения таблицу со всеми RGB цветами при создании дизайна сайта. В таблице указаны название цвета и его код в RGB и HTML.

Safetynut

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

Значки форумов phpbb3

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

Подкатегории

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

PHP Собственно создание такого раздела как JavaScript на этом сайте не оставило вариантов по поводу того, что раздел с HTML все же должен был когда-то появиться. Ибо даже за небольшими какими-то символами приходилось лазить по всему интернету, то там, то сям.
 В итоге, было решено завести свой какой-то небольшой "склад" или "архив" это уж как угодно, куда можно будет обратиться даже за элементарными синтаксическими писаниями кода, ведь если даже представляешь как и что, все равно в голове порой не держится или элементарно вылетает на время, как же это все пишется.
 В некоторых случаях здесь не только можно будет подсмотреть написания, но надеюсь со временем хранить какие-то формы, которые можно будет использовать для оформления страничек сайта. Хотя если речь идет о полноценном оформлении, то без CSS уже не обойтись...

P.S. Пока в этот же раздел будут попадать и странички про динамичный HTML, то есть про PHP, а там будет видно.

 

 Как это бы не звучало странно, но интересоваться Java Script я стал исключительно ради собственного любопытства. Причем это любопытство было подкреплено, прежде всего, не изучением непосредственно языков программирования, а изучением электроники. В ней после построения неких аналоговых схем, я добрался до микроконтроллеров. И эти самые микроконтроллеры пришлось программировать, ведь без прошивки это не более чем кусочки пластика и железа. В итоге, чуть-чуть освоившись с программированием микроконтроллеров и начав кое-что осознавать, я ненароком провел некую параллель между попавшимся мне на глаза кодом для микроконтроллеров и Java Script. И тут-то и выяснилось, что изучая один из языков программирования, по сути ты познаешь логику построения и других языков.
 При этом долгое время я так и не мог решиться завести на сайте отдельную категорию под Java Script, так как не чувствовал в себе некой достаточной фундаментальности, для однозначно полезных и "сильных" статей по этой теме. Однако материал постепенно накапливался как снежный ком и хранить его размазывая по другим смежным категориям оказалось делом неблагодарным, так как там он был не в тему... В итоге так и родилась вот эта категория, которая станет для меня моим небольшим справочником в изучении Java Script, если же это кому-то пригодится еще, то будет и вовсе здорово. Осталось лишь замолвить слово о снисхождении к моему опыту, так как он изначально идет от дилетанта...

Далее, пожалуй, текст будет всегда несколько неряшлев и постоянно в доработке, ведь в нем то и дело будут появляться новые элементы, ссылки на конкретные примеры, объяснений операторов JS, по крайней мере так, как я их понимаю. К тому же масло в огонь будут подливать и разработчики ПО, ведь и у них что-то постоянно будет меняться, что потребует корректировок, что-то я буду переосмысливать и переписывать.
 ...это более для собственного пользования, однако если вы новичок или любитель в Java Script, то даже такая кустарная информация вам может быть очень даже полезной.

Операторы функции и их применения будут сведены в таблицу с комментариями и пояснениями, к ней и обращаемся.

Наименование

Пример использования или синтаксис

Примечание

HTML  формы для ввода

<input   id="ida" >

<input   id="ida" >

Форма для ввода, рамка ida – свой уникальный id - a на страницу для элемента, для считывания переменной добавляем value 

<input type="radio" > 

<input type="radio" > 

 Примерно тоже самое, что и просто input, но обработка данных сложнее. (пример)

<input type="checkbox">

<input type="checkbox">

Примерно тоже самое, что и radio, только можно установить несколько значений.

onchange

<select onchange="...">

 Позволяет выбирать значение из списка (пример)

 

 

 

HTML  формы для вывода

<div>

<div id="demo1">Текст</div>

Используется для вывода данных, с возможностью подмены их через JS

<pre>

<pre id="demo1"></pre>

 Можно также как и в div выводить значение, но форма отображения блока будет уже со стилями свойственными pre

 Арифметические операторы

 

плюс 

-

 

минус 

*

 

умножить 

 **

 

степень 

/

 

делить

%

(* -при делении на 2 можно использовать для нахождения чет, нечет)

модуль

++

(инкремент) 

прибавить в виде приращения 

--  (декремент)

убавить в виде сокращения 

Элементы активности

<button onclick="myF()">Кнопка</button>

<button onclick="myF()">Кнопка</button>

Можем ссылаться как на выполнение функции myF(), так и на вывод информации сразу

onclick

см. выше пример для кнопки

При кликании будет активироваться, можно добавлять к картинкам, кнопкам, ссылкам (пример)

onmouseover 

см. выше пример для кнопки

активируется при наведении на элемент курсора мышки

onmouseout

см. выше пример для кнопки

активируется при уводе мышки с элемента
onkeydown см. выше пример для кнопки активируется при нажатии клавиш на клавиатуре
onload window.onload=function(…){…} активизируется при загрузке страницы
onkeyup
onkeyup="function(this.value)"
активизируется в момент отпускания нажатой клавиши

getElementById

document.getElementById("email") (берет значение из ID email)

document - Обращение к файлу html
getElementById() – получить элемент по идентификатору() (можно и при помощи других критериев)
email - id элемента

getElementsByClassName

getElementsByClassName("...")[0]; Берет элементы по классу (пример)

getElementsByTagName

getElementsByTagName("...")[0]

Берет элементы по названию блока div, p... (пример)

document.body.innerHTML.

document.body.innerHTML.replace(/8/g, '7'); (замена 8 на 7 подмена)

document.body.innerHTML.style (меняет стиль)

выводит значение, стиль в HTML

 document.location.href =

 document.location.href = (пример)

  перенаправляет со страницы что ввели или то, что взяли из формы (переменной)

setInterval

setInterval(function(){ ….},1000);

Вызывает функцию с заданной периодичностью многократно. (пример)

setTimeout

см. setInterval

Схожее с setInterval, но вызывает код один раз. (пример)

 

 

 

 

 

 

Сервисные (исполнительные) элементы

<script type="text/javascript">

</script>

 

 

Обрамляем JS

typeof x

document.getElementById("demo1").innerHTML = typeof x;

Х – переменная, для которой хотим узнать тип. Его выводим для нашего случая через запрос для блока ID demo1. Блок конечно тоже должен быть в наличии, а то куда же выводить то?!

let и var

 

var применяется для присвоения значения переменной скажем в функции, когда берем ее значение из формы ввода.

let x = 5;

let x = document.getElementById("id");
var a = document.getElementById("x").value;

Присваиваем значение для переменной. Можно использовать присвоение через document.getElementById("id"). id - в данном случае берется скажем из формы ввода где форма расположена в document.

if

if (условие) {делаем}

Условие для одного раза

while

Смотри if

Тоже, что и if, только будет повторяться, пока не уйдет далее. Может зациклить машину.

switch

switch(i) {
  case i=0:
    ...
    break;
  case i=1:
    ...
    break;
  case i=2:
    ...
  default:
    ...
}

Выполняем одно из условии исходя из критерия, скажем для переменной i. Как только условие будет выполнено, то цикл перебора закончится. (пример)

default: - если ни одно из условий не сработало.

 for

 for (let i=0; i<10; i++) {что делаем}

 Применяется, как правило, для работы с массивами, перебирая от i = 0 до i<10 с шагом i++. (пример)

 Ну уж и никаких шансов у меня и не оставалось, чтобы обойти стороной CSS с тех пор, как я любительски связался с JS и с HTML, ну или PHP. Собственно раз это должно было произойти, то почему бы и нет...!?
 Так вот, все полезные и интересные "фишки" я и буду утягивать к себе сюда, на этом и закончу пока вступление для моей категории CSS.
 Более подробные примеры использования CSS будут приведены в конкретных статьях этой категории.

 

 

Краткий справочник* - дополняется

animation: show 3s 1; /* Указываем название анимации, её время и количество повторов*/
animation-fill-mode: forwards; /* Чтобы элемент оставался в конечном состоянии анимации */
animation-delay: 1s; /* Задержка перед началом */
opacity:0; прозрачность /* от 0 до 1 */
width:300px;
background:#176387; /* фон */
color:#fff; /* цвет шрифта */
font-size:25px; /* размер шрифта */
border:3px solid #2BA2DB; /* рамка */
padding:20px; /* отступ снаружи */
margin:auto; /* отступ внутри */
margin-bottom:20px; /* отступ */
text-align:center; /* выравнивание */
transition: 1s; /*Скорость перехода состояния элемента*/

В это категории речь пойдет об особенностях использования CMS Joomla