Сайтостроение
Все то, благодаря чему вы сейчас смотрите и то, что видите, скрывает в себе не столь явное и визуально пригодное для восприятия. Ведь за страницами любого сайта в интернете скрыто множеств кода, тегов, описаний... В общем всего того, что делает сайт наглядным не только вам, но и электронным машинам и роботам, которые с ним работают.
Если вы по долгу своей профессии, а может по увлечению все-таки каким-о образом связаны с процессом создания сайтов, то мы думаем вам будет полезна данная категория. Ведь в ней мы как раз и расскажем о том, как можно сделать визуализацию, оптимизацию, всевозможные улучшения и изменения для сайтов и их страниц...
Дублируем папку с шаблоном и переименоввываем ее.
Модуль с главным меню в protostar по умолчанию помещается в Position-7 . Он настроен для меню. Вы увидите это меню в правой колонке страницы. Для изменения меню на горизонтальное необходимо сделать некоторые настройки.
Случилось так, что однажды при редактировании объемной статьи на joomla сервер выдал мне ошибку 500 со следующим уведомлением: Произошла ошибка DB function reports no errors.
1. Включаем плагин Содержимое - Загрузка модуля в Материал
2. Создаем модуль. При создании модуля вписываем выдуманное название позиции, которого нет в нашем шаблоне.
3. Вставляем в статью { loadposition modul } без пробелов между скобками и словами. Между loadposition и modul пробел есть. Вставку делаем в том месте, где хотите вызвать модуль.
modul - название позиции, в которой у вас стоит нужный модуль (то, которое вы выдумали).
Если нужно обтекание модуля текстом, обрамляем фигурные скобки дивами
<div style="float:left;margin:2px;">{ loadposition modul }</div>Нет ничего плохого в joomla 1.5, в особенности если она с умом доработана, установлены все необходимые плагины и модули. Но Google все равно делает замечания: "На сайте Joomla нужно обновить ПО. Мы обнаружили, что на Вашем сайте используется Joomla 1.5 – старая версия Joomla. Устаревшее или неисправное ПО может стать причиной взлома или установки вредоносного кода. Поэтому мы рекомендуем Вам обновить ПО." Так что будем обновлять.
Если вы задумались о создании своего сайта, но пока не определились, насколько вам это нужно и сможете ли вы, или же вы просто не намерены тратить деньги на создание и поддержание своего сайта, вам просто необходим бесплатный хостинг. Бесплатный хостинг - это тот, который предоставляет личное пространство и доменное имя 3 уровня под создание сайта абсолютно (или почти) бесплатно.
На самом деле, не такой уж большой выбор удобных редакторов для сайта на drupal, визуальные сразу отметаю, потому как они нещадно засоряют код, хотя они очень удобны для
полных чайников новичков. Мой выбор - bueditor. Легкий редактор для
кодеров с возможностью создания своих кнопок (если нужно быстро кое-что дивами
обрамить или класс присвоить - это делается в bueditor за 1 клик). Приступаем к
установке.
Начнем с того, что скачиваем новую версию drupal 7 (http://drupal.org/project/drupal), распаковываем и читаем UPGRADE.txt. Собственно, там и написано, как обновить Drupal в рамках одной мажорной версии, правда на английском языке. А написано вкратце следущее:
После установки и настройки ПО выделенного сервера или виртуального сервера не обходится без недоработок, результатом которых являются ошибки. Рассмотрим некоторые ошибки, которые могут возникнуть при работе с базами данных MySQL.
Горизонтальное меню сделать достаточно легко, нужно лишь немного воображения и знания html и css.
Для начала попробуем сделать простое горизонтальное меню. Вот пример как оно будет выглядеть:
Подкатегории
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; /*Скорость перехода состояния элемента*/