Сайтостроение
Все то, благодаря чему вы сейчас смотрите и то, что видите, скрывает в себе не столь явное и визуально пригодное для восприятия. Ведь за страницами любого сайта в интернете скрыто множеств кода, тегов, описаний... В общем всего того, что делает сайт наглядным не только вам, но и электронным машинам и роботам, которые с ним работают.
Если вы по долгу своей профессии, а может по увлечению все-таки каким-о образом связаны с процессом создания сайтов, то мы думаем вам будет полезна данная категория. Ведь в ней мы как раз и расскажем о том, как можно сделать визуализацию, оптимизацию, всевозможные улучшения и изменения для сайтов и их страниц...
Требовалось добавить на форуме фото из первого поста к названию темы. Движок phpBB 3.0.9., шаблон prosilver.
Единственным полуготовым решением на тот момент оказался мод Topic images from attachments v0.2, готовых вообще не нашлось. А полуготовое потому, что требуется "доработать напильником".
Что дает модификация:
Возможность использования изображений тем настраивается для каждого форума
Группам/пользователям можно назначать права на установку изображений тем
В админке можно задать максимальный размер миниатюры для изображения тем (Общие
-> Конфигурация -> Размещение сообщений -> Максимальная ширина/высота
изображения темы) и отключать этот функционал совсем, установив 0
Стандартная структура работы с миниатюрами не нарушена, миниатюры тем не имеют
отношения и обычным миниатюрам изображений
При использовании изображений небольших размеров (меньше максимального для
миниатюр тем) само изображение выводится из оригинального файла, следовательно
можно использовать небольшое анимированное gif-изображение
Как работает:
Пользователь пишет первый пост в теме, загружает изображение (вложения для работы мода должны быть разрешены), жмет "назначить изображение теме", по заданным в админке размерам генерируется превьюшка, которая пишется в папку с вложениями (iles/) с префиксом topic_image_ .Перед названиями в списке тем появляется загруженное изображение.
Рано или поздно перед каждым администратором форума особо остро встает проблема СПАМА. Спам этот разносится по форуму пользователями как вручную, так и автоматически и если распространение первого можно легко остановить силами самих движков форумов, то со вторым немного сложнее. Современные программы для постинга (автоматической рассылки сообщений) по форумам позволяют регистрироваться даже с возможностью активации по электронной почте, спамеру нужно лишь вводить вручную выводимую ему на монитор капчу с разных форумов в том случае, если программе не удалось самой распознать ее. А если ваш форум попал в базу рассылок одной из популярных программ, количество спам регистраций за сутки может достигать пятисот. Приведу некоторые принципы борьбы со спамом и готовое решение (на мой взгляд самое шикарное) для форума SMF.
После установки форума phpBB оказалось, что заголовки конференций и тем у него мягко говоря не оптимизированы. До названия, например, темы идет сначала название сайта, далее текст "Просмотр темы", а уже только после - название темы. Аналогично на страницах с конференциями со словами "Просмотр форума". Так и просится все поменять местами в обратном порядке, а "Просмотр..." вообще убрать. Как? Разбираемся на версии phpBB 3.0.9:
Коды ошибок посылаются WEB-сервером агенту пользователя для определения его дальнейшего поведения. Ответы веб-сервера делятся на диапазоны:
100-199 Информационный. Сообщает агенту что, запрос агента принят и обрабатывается
200-299 Запрос агента обработан успешно, сервер отправил клиенту запрашиваемый документ
300-399 Запрос агента изменен и агенту нужно предпринять некоторые действия для удовлетворения измененного запроса.
400-499 Проблемы при попытке выполнить запрос.
500-599 Ошибки сервера
В диапазоне определены лишь несколько кодов, хотя для сервера при необходимости могут определяться собственные коды. При получении кода, который не может распознать, агент интерпретирует его в соответствии с диапазоном, к которому этот код принадлежит. Коды в диапазонах 100-199, 200-299 и 300-399 большинство Web-броузеров обрабатывают без извещения пользователя, а некоторые коды ошибок из диапазонов 400-499, 500-599 отображаются для пользователя.
Форма выпадающего меню кодируется следующим образом:
Часто случалась такая оказия, что на сайте с движком Джумла все вроде бы было хорошо, но вот проходит какое-то время и бац – не приходят комментарии для модерации. Вполне возможно, что такое было после обновления версии Джумлы или отдельных дополнений, не в этом суть. И, конечно, начинался «разбор полетов» где и что.
Проблемы с отправкой почты частенько возникают при переносе сайта с localhost (локального компьютера) или хостинга на хостинг. Причин этих проблем несколько и скрыты они могут быть как в настройках сервера, так и настройках самой joomla. Отсюда и вариантов решения тоже несколько и на вскидку нельзя сказать, какой подойдет именно вам. Я после установки сайта на хостинг сразу проверяю работоспособность отправки почты.
Бывает так, что что к своему серверу вы даже не притрагивались, а некоторые сайты на нем стали выдавать ошибку 502 Bad Gateway. В чем может быть дело?
При обновлении >joomla 1.5, 1.6, 1.7, 2.5 или при установке каких-либо модулей или плагинов на нее же установщик может ругаться следующими фразами:
JFolder::files: Путь не указывает на правильную папку или папка была удалена
JFolder::folder: Путь не указывает на правильную папку или папка была удалена
JFolder::files: Путь не указывает на правильную папку или папка была удалена
Ошибка! Не найден XML-файл установки Joomla!
или, как вариант:
JFolder: :files: Путь ведёт не к каталогу. Путь: /***/tmp/install_4f31baa4cf881
JFolder: :folder: Путь ведёт не к каталогу. Путь: ***/tmp/install_4f31baa4cf881
JFolder: :files: Путь ведёт не к каталогу. Путь: ***/tmp/install_4f31baa4cf881
JInstaller: :Install: Не найден установочный XML-файл Joomla
Итог - ничего не устанавливается.
Ссылки, как уже говорилось в статье как сделать ссылку, бывают прямыми (к примеру http: //сайт.ру ) и через редирект (перенаправление), например: http: //сайт.ру/goto/http://yandex.ru/ или http: //сайт.ру/go.php?site=yandex.ru . Если без дополнительных действий прописать такие ссылки, работать должным образом они не будут, и в лучшем случае покажут ошибку 404 (страница не существует). Нужен скрипт, который именно внутри html ищет и заменяет ссылки на редирект. Для разных движков, да практически для всех, существуют плагины, автоматически заменяющие внешние ссылки на редиректные, но смысл их один и заключается примерно в следующем.
Подкатегории
HTML Кол-во материалов: 8
Раздел посвящен разметке страниц, то есть формированию кода, как правило тегов по определенному алгоритму. Здесь именно правильно сказать на мой взгляд, что HTML, это прежде всего, разметка, а не язык, так как алгоритмы и логика подразумевают так скажем прикрепление каких-то ярлыков к тегам, а не выполнение непосредственных активных задач. Это потом уже с этими ярлыками работают языки, а вот HTML ставит как раз границы с чем работать.
PHP Кол-во материалов: 5
Собственно создание такого раздела как JavaScript на этом сайте не оставило вариантов по поводу того, что раздел с HTML все же должен был когда-то появиться. Ибо даже за небольшими какими-то символами приходилось лазить по всему интернету, то там, то сям.
В итоге, было решено завести свой какой-то небольшой "склад" или "архив" это уж как угодно, куда можно будет обратиться даже за элементарными синтаксическими писаниями кода, ведь если даже представляешь как и что, все равно в голове порой не держится или элементарно вылетает на время, как же это все пишется.
В некоторых случаях здесь не только можно будет подсмотреть написания, но надеюсь со временем хранить какие-то формы, которые можно будет использовать для оформления страничек сайта. Хотя если речь идет о полноценном оформлении, то без CSS уже не обойтись...
P.S. Пока в этот же раздел будут попадать и странички про динамичный HTML, то есть про PHP, а там будет видно.
Java Script Кол-во материалов: 52
Как это бы не звучало странно, но интересоваться 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; /*Скорость перехода состояния элемента*/