Сайтостроение
Все то, благодаря чему вы сейчас смотрите и то, что видите, скрывает в себе не столь явное и визуально пригодное для восприятия. Ведь за страницами любого сайта в интернете скрыто множеств кода, тегов, описаний... В общем всего того, что делает сайт наглядным не только вам, но и электронным машинам и роботам, которые с ним работают.
Если вы по долгу своей профессии, а может по увлечению все-таки каким-о образом связаны с процессом создания сайтов, то мы думаем вам будет полезна данная категория. Ведь в ней мы как раз и расскажем о том, как можно сделать визуализацию, оптимизацию, всевозможные улучшения и изменения для сайтов и их страниц...
Прежде, чем задаваться вопросом, как убрать рекламу в браузере, нужно выяснить характер ее происхождения. А происхождение может быть либо вирусным, и этот вирус или троян у вас на компьютере, либо довольно цивилизованным и установленным на сайт его же владельцем.
Суть в том, что русская локализация движка, и уж тем более дополнительных модулей, не всегда переведена в оригинале корректно, а иногда просто хочется выразиться иначе. Как исправить перевод на рабочем сайте? Следующим образом:
Не секрет, что, используя CMS phpBB, рано или поздно сталкиваешься с проблемой множества проиндексированных поисковиками ссылок различного вида, но ведущих на одну и ту же страницу. В глазах Яндекса и Google это выглядит, как множество копий одной и той же страницы на вашем сайте, а это залог пессимизации в выдаче. Нужно, чтобы на 1 страницу вел только 1 url. Добиться этого можно несколькими способами: либо редактированием robots.txt, либо установкой на форум модификаций. На мой взгляд самая достойная - phpBB SEO Ultimate SEO URL.
Base64 - это специальный метод кодирования информации в 64-разрядный код (6 бит), широко используемый в приложениях электронной почты для кодирования бинарных данных. Весь диапазон закодированных символов укладывается в английский алфавит, цифры и ряд специальных символов. Алгоритм base64 и по сей день применяется там, где нет возможности гарантировать бережного обращения с вашей информацией — например при кодировании вложений электронной почты или паролей пользователей в системе. Еще base64 используют для «вшивания» картинок напрямую в htm. В статье представлен онлайн генератор и декодер функции base64.
Дублируем папку с шаблоном и переименоввываем ее.
По умолчанию, в пагинаторе (пейджер, постраничный навигатор) друпала показывается 9 ссылок на страницы, из-за этого он, бывает, выстраивается в 2 строки, что не очень красиво.
Такая фича как фоновый звук на html странице на сайте нужна довольно редко, но все же, было дело мне понадобилась. Реализуется очень просто.
Бывают случаи, когда, заходя на хорошо знакомый сайт (ваш собственный, например), браузер выдает ошибку типа "Данные не получены" (Хром), "Соединение закрыто удаленным сервером" (Опера), или сайт этот грузится до неприличия медленно. Первая мысль, конечно, что проблемы у сайта, у сервера, на котором от располагается. Это вполне вероятно, и убедиться или опровергнуть это можно, попытавшись открыть сайт через anonymouse.org: если через него заработал - с сервером, на котором находится сайт все в порядке. Если сайт открывается с другого компьютера или с модема другого провайдера - с ним тоже все в порядке. Так в чем же тогда проблема? Узнать это можно, проведя трассировку маршрута к сайту или IP.
При организации нод по категориям с помощью терминов таксономии посредством views пропадают описания терминов, они не выводятся на экран. Чтобы вернуть описания и вывести их в своем законном месте, проделаем нехитрые манипуляции с вьюс. Пошагово:
Программы видеозахвата позволяют снимать видеоролики (скринкаст) с экрана вашего компьютера. А уж что будет в этом видео, видеоурок или прохождение онлайн игры, это вам решать.
Все это поможет тем, кто занимается видеоблогерством на таком популярном сайте как Youtube и кому просто необходимо давать какие-то комментарии, при этом отображая картинку с экрана своего компьютера!
Итак, ниже представлена десятка абсолютно бесплатных программ, которые могут быть использованы для записи таких видео:
Задача вывода блока похожих материалов в общем-то довольно простая, и решить ее
можно разными путями, но все они будут завязаны на терминах таксономии.
Соответственно, все ноды к терминам нужно изначально привязать.
Далее, реализовывать вывод блока будем через неподражаемый views. Даже если
воспользуемся доп модулями, все равно views необходимо будет включить, да и
вообще без него друпал не друпал. Скачиваем с друпал орг www.drupal.org/project/views
, устанавливаем, включаем.
Подкатегории
HTML Кол-во материалов: 8
Раздел посвящен разметке страниц, то есть формированию кода, как правило тегов по определенному алгоритму. Здесь именно правильно сказать на мой взгляд, что HTML, это прежде всего, разметка, а не язык, так как алгоритмы и логика подразумевают так скажем прикрепление каких-то ярлыков к тегам, а не выполнение непосредственных активных задач. Это потом уже с этими ярлыками работают языки, а вот HTML ставит как раз границы с чем работать.
PHP Кол-во материалов: 5
Собственно создание такого раздела как JavaScript на этом сайте не оставило вариантов по поводу того, что раздел с HTML все же должен был когда-то появиться. Ибо даже за небольшими какими-то символами приходилось лазить по всему интернету, то там, то сям.
В итоге, было решено завести свой какой-то небольшой "склад" или "архив" это уж как угодно, куда можно будет обратиться даже за элементарными синтаксическими писаниями кода, ведь если даже представляешь как и что, все равно в голове порой не держится или элементарно вылетает на время, как же это все пишется.
В некоторых случаях здесь не только можно будет подсмотреть написания, но надеюсь со временем хранить какие-то формы, которые можно будет использовать для оформления страничек сайта. Хотя если речь идет о полноценном оформлении, то без CSS уже не обойтись...
P.S. Пока в этот же раздел будут попадать и странички про динамичный HTML, то есть про PHP, а там будет видно.
Java Script Кол-во материалов: 51
Как это бы не звучало странно, но интересоваться 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; /*Скорость перехода состояния элемента*/