Сайтостроение
Все то, благодаря чему вы сейчас смотрите и то, что видите, скрывает в себе не столь явное и визуально пригодное для восприятия. Ведь за страницами любого сайта в интернете скрыто множеств кода, тегов, описаний... В общем всего того, что делает сайт наглядным не только вам, но и электронным машинам и роботам, которые с ним работают.
Если вы по долгу своей профессии, а может по увлечению все-таки каким-о образом связаны с процессом создания сайтов, то мы думаем вам будет полезна данная категория. Ведь в ней мы как раз и расскажем о том, как можно сделать визуализацию, оптимизацию, всевозможные улучшения и изменения для сайтов и их страниц...
Не раз на практике возникала проблема когда поддомен какого-нибудь сайта начинал выдаваться с контентом "смежного" сайта установленного на сервере. При этом в почте можно было найти подобное сообщение:
"В результатах поиска найдены поддомены сайта igryplus.ru. Примеры: http://mail.igryplus.ru Если найденные поддомены не должны участвовать в поиске, закройте их от индексирования, следуя рекомендациям в Справке."
Прямо скажу, ситуация не очень хорошая, так как поисковики такой контент воспринимают уже как нагромождение от уже имеющегося сайта. Поэтому исправляем ситуацию.
Если есть проблемы с микроразметкой от shema.org в валидаторе Яндекса с ошибкой «Не выполнено обязательное условие для структурированных сниппетов творческих работ: поле description или articleBody отсутствует или пусто», то это лишь значит одно, то, что собственно и указано в ошибке. Значит надо прописывать описание к статьям и категории на странице. Так как за форматирование блога на странице отвечают сразу несколько файлов, то и править придется пару файлов.
Когда веб мастер трясется над своим сайтом как над дитем, то само собой ему хочется чтобы и нос без соплей и памперсы поменяны. Ну, в общем, чтобы все на месте и как надо. Обтачивать странички сайта можно до идеала бесконечно и долго. И одним из таких этапов может стать желание веб мастера открывать изображение на страничках поверх основной странички. То есть кликнул, на полупрозрачном фоне видно основную страничку, а поверх картинку, на которую кликнул. Называется это не иначе как Lightbox. Так вот, если у вас есть такая необходимость, для движка Joomla, то мы вам в этой статье поможем. Ведь именно здесь мы вас научим как можно реализовать Lightbox в Joomla с минимальными телодвижениями.
Вместе с защитой сайтов совершенствуются и те и то, что пытается эту самую защиту взломать. Так можно сказать о капче для JComments движка Джумла. В свое время эта штатная капча удовлетворяла всем и вся, дабы чувствовать себя вполне защищенным от спама и не беспокоиться о постоянных нападках последнего на вашу почту. Такую защиту можно было бы сравнить с нападками от варваров на богатый город, который ой как им хочется разграбить и раздербанить по камушкам. Ведь спам-боты как и варвары не знают ни чувств жалости, ни меры, ни что более важно, целесообразности своего поведения. А порой, это даже не на благо тому, кто их выпустил на свободу, но разве нам от этого легче!?…
Чтобы большие изображения вписались в окно форума, их конечно же нужно уменьшить. Не каждый продвинутый, а уж тем более обыкновенный пользователь форума умеет самостоятельно уменьшать картинки, поэтому хотелось бы, чтобы при загрузке они уменьшались до нужного размера автоматически. Решением данной задачи и займемся.
JComments - бесплатный плагин для joomla, и единственное, чем вы должны отблагодарить его создателей - это оставить в неизменном виде их копирайт - ссылку на оффсайт. Так что статья представлена лишь для самообразования, потому как решение по защите этого самого копирайта у JComments неординарное и в прямом смысле этого слова зашифрованное.
В один прекрасный день вы заметили, что проиндексированных Яндексом (реже гуглом) страниц вашего сайта стало вдвое больше, чем существующих, причем в индексе помимо http теперь и https версия вашего сайта, которая совершенно не предназначена для пользователей и является копией основного сайта? Это вы вовремя спохватились. Еще немного, и Яндекс может принять https за основную версию сайта, а http сделает зеркалом или просто может начать выбрасывать дубли страниц сайта по http. Сайт станет хуже ранжироваться со всеми вытекающими последствиями. Уже? Ну, это тоже не беда и один из моих сайтов прошел через это.
Очень удобно иметь в поле зрения таблицу со всеми RGB цветами при создании дизайна сайта. В таблице указаны название цвета и его код в RGB и HTML.
Началось все с того, что мой компьютер начинал виснуть через несколько минут после запуска системы: не открывались страницы в браузере, открытые браузры разрывали соединение с интернетом, не открывался диспетчер задач, не запускались никакие программы. При этом папки в проводнике открывались без проблем. В скайпе, если успеть его открыть, соединение с интернетом не пропадало. Система windows 8.
Решение для версии phpbb 3.0.9, в более ранних версиях возможен баг, из-за которого не задать значки тем без исправления кода. Подробности исправления бага мне были не нужны, поэтому здесь их не будет.
Подкатегории
HTML Кол-во материалов: 8
Раздел посвящен разметке страниц, то есть формированию кода, как правило тегов по определенному алгоритму. Здесь именно правильно сказать на мой взгляд, что HTML, это прежде всего, разметка, а не язык, так как алгоритмы и логика подразумевают так скажем прикрепление каких-то ярлыков к тегам, а не выполнение непосредственных активных задач. Это потом уже с этими ярлыками работают языки, а вот HTML ставит как раз границы с чем работать.
PHP Кол-во материалов: 5
Собственно создание такого раздела как JavaScript на этом сайте не оставило вариантов по поводу того, что раздел с HTML все же должен был когда-то появиться. Ибо даже за небольшими какими-то символами приходилось лазить по всему интернету, то там, то сям.
В итоге, было решено завести свой какой-то небольшой "склад" или "архив" это уж как угодно, куда можно будет обратиться даже за элементарными синтаксическими писаниями кода, ведь если даже представляешь как и что, все равно в голове порой не держится или элементарно вылетает на время, как же это все пишется.
В некоторых случаях здесь не только можно будет подсмотреть написания, но надеюсь со временем хранить какие-то формы, которые можно будет использовать для оформления страничек сайта. Хотя если речь идет о полноценном оформлении, то без CSS уже не обойтись...
P.S. Пока в этот же раздел будут попадать и странички про динамичный HTML, то есть про PHP, а там будет видно.
Java Script Кол-во материалов: 53
Как это бы не звучало странно, но интересоваться 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 |
|
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"); |
Присваиваем значение для переменной. Можно использовать присвоение через document.getElementById("id"). id - в данном случае берется скажем из формы ввода где форма расположена в document. |
|
if |
if (условие) {делаем} |
Условие для одного раза |
|
while |
Смотри if |
Тоже, что и if, только будет повторяться, пока не уйдет далее. Может зациклить машину. |
|
switch |
switch(i) { |
Выполняем одно из условии исходя из критерия, скажем для переменной i. Как только условие будет выполнено, то цикл перебора закончится. (пример) default: - если ни одно из условий не сработало. |
|
for |
for (let i=0; i<10; i++) {что делаем} |
Применяется, как правило, для работы с массивами, перебирая от i = 0 до i<10 с шагом i++. (пример) |
CSS Кол-во материалов: 14
Ну уж и никаких шансов у меня и не оставалось, чтобы обойти стороной 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; /*Скорость перехода состояния элемента*/