Рекламко

четверг, 22 января 2015 г.

Определимся с терминологией

Для дальнейшего общения и понимания каких-то моментов нам необходим определённый минимум знаний. Причём знаний не для того, чтобы стать веб-дизайнером или сео-оптимизатором. а просто для того, чтобы хотя бы понимать какие-то базовые принципы, и вообще - о чем идет речь.



Итак:
1. Домен

Каждый компьютер, подключенный к сети, имеет свой IP-адрес вида 37.218.23.216. То есть состоящий из четырех чисел, разделенных точкой.
Домен связывается с IP-адресом сайта. То есть ты набираешь в адресной строке yandex.ru, а физически твой компьютер загружает информацию с сервера по адресу 87.250.250.11. 
Домен нулевого уровня - это «.» (точка). Он называется "корневой".
Сайтов на нем нет, он чисто технический.
От него отпочковываются домены первого уровня — .com, .net, .org, .tv, .ru и другие.
Есть домены региональные (по странам — .ru, .ua, .uk, .us), а есть функциональные — .com (Company), .org (Organization), .net (Network).
Сайты существуют только в формате доменов 2-ого и ниже уровней.
http://yandex.ru — домен второго уровня (для нас — базовый уровень)
http://mail.yandex.ru — домен третьего уровня (поддомен базового)
Обычно используются 2 и 3 уровень (для подпроектов сайта).
То есть я покупаю себе домен, а потом в настройках указываю адрес сайта, куда он ведет.
Вот сейчас у меня есть этот блог с доменом третьего уровня - nullsites.blogspot.com. И я решила купить себе домен первого уровня,- скажем, seoblondy.ru. Затем в настройках я указываю адрес сайта, и блог будет доступен уже по новому домену.
Ну а у меня будут только бесплатные домены третьего уровня - здесь, в блоге - от Гугла, на сайтах - от Юкоза.

2. Хостинг

Это слово происходит от английского глагола to host — "принимать гостей".
За некую сумму мне (в зависимости от моих нужд) выдается кусочек мощности сервера, на котором будет храниться мой сайт со всей информацией - тексты, картинки, видео и т.д.
К примеру, на сервере может быть жесткий диск на 1Тб, но такой сервер стоит 6000 рублей в месяц.
Мне же за 100 рублей предлагается 100 Мб.
И я лишнего не плачу, и компания-хостер зарабатывает за счет более грамотного распределения ресурсов.
Причем, на начальном этапе это лучший вариант, потому как решением всех программных вопросов занимаются специалисты компании.
А заниматься есть чем, ведь одной железячки для работы мало, нужно еще и программное обеспечение, грамотно настроенное.
Крупные проекты, такие, как "ВКонтакте", работают на сотнях серверов, потому как обеспечивают доступ для миллионов людей каждый день. Разумеется, один сервер в таком случае в поле не воин, а сайт должен работать бесперебойно, поэтому такие проекты используют распределенную систему серверов.
Ну а у меня будут только бесплатные хостинги - здесь, в блоге - хостинг от Гугла, на сайтах - от Юкоза.


4. HTML

Эта аббревиатура расшифровывается как HyperText Markup Language, что в переводе означает "язык гипертекстовой разметки".
Это такой текст, что в нем я могу расширить привычное представление гипер-ссылками. На этом построен весь Интернет. Одни страницы ссылаются на другие, и наоборот.
Ключевое понятие в HTML -

5. Теги

Запомним это понятие раз и навсегда. Тег — это нечто между скобочек, если по-простому. Правильнее в данном контексте называть их HTML-теги, то есть теги гипертекстового языка разметки.
Сейчас проведем эксперимент. Нажмите на клавиатуре Ctrl+U, и вместо данной страницы вы увидите ее разметку.
Не пугайтесь обилия тегов. Со временем вы начнете понимать, что каждый из них значит.
Вообще, нам не надо учить их как-то специально. Их нужно запоминать по мере появления задачи, в контексте.



Теги бывают открытыми и закрытыми.
Открытые обрамляют какой-то текст или другие теги. Например, <b>это жирный текст</b>.
Закрытые теги не имеют внутреннего содержимого. Например, такой тег <img src=»http://3.bp.blogspot.com/-s26Mv-UKGAs/VMESZV_SUyI/AAAAAAAADg4/wVj_G7XnqDk/s1600/V01zt17v46MtGZRkyq4QawvqCkUvFrGEhL0u83kppOOA.jpg»/> выведет эту картинку:



Многие теги и их атрибуты являются сокращениями английских слов.
Например, img — image, изображение. А src — source, источник. То есть источник изображения.
Таким образом просто запомнить все основные теги.

Вот пример простейшего каркаса любого сайта, любой web-страницы:

<!DOCTYPE  html> - Самая первая строка <!DOCTYPE  html> тегом не является, но говорит браузеру по своду каких правил отображать страницу
<html>  — это корневой обрамляющий тег. Без него страница не будет читаться
<!-- Мета-информация. Она влияет на такие вещи, как: -->
<head>
<title>Это заголовок страницы</title> <!-- Заголовок страницы -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <!-- Кодировка страницы -->
</head>
<!-- Непосредственно тело страницы. То, что мы видим в окне. -->
<body>
<img src=""  width="225" height="62" <!-- Наше изображение -->
<h1>Привет, мир!</h1> <!-- Заголовок первого уровня -->
<p> <!-- Параграф -->
Меня зовут <b>Соня</b>!
</p>
</body>
</html>

6. Скрипты

HTML-разметка — это скелет любой страницы любого сайта. Но здесь надо отдавать себе представление о том, что скелет без мускулатуры недвижим. Вот скрипты — это и есть те мышцы, которые приводят верстку в движение. И все привычные вещи, о которых мы не задумываемся (типа пресловутых "лайков"), существуют благодаря этим маленьким помощникам.
Вот у меня есть верстка. И мне нужно ее оживить.
Проще говоря, запрограммировать реакцию на действия пользователя.
Например, при нажатии на "Мне нравится", отправляется информация на сервер, приходит ответ, количество "лайков" рядом с сердечком увеличивается. Это и есть работа скрипта.
Основной скриптовый язык — JavaScript.

Вот код простого скрипта:
<script type=»text/javascript»>
alert(«Привет, Соня!»);
</script>

Если мы вставим этот скрипт себе в каркас сайта, то при запуске сайта будет появляться маленькое окошко с приветственной надписью.

Сегодня мало кто пользуется JavaScript в чистом виде. Почему? Потому что команды разработчиков написали специальные библиотеки (фреймворки, frameworks), которые существенно облегчают ряд типовых задач. Т.е. мы берем уже готовые блоки, и подгоняем их под свои нужды.

Самый популярный из фреймворков — jQuery


7. Каскадные листы стилей (CSS)

Если HTML - скелет, скрипты - мышцы, то CSS (Cascade Style Sheets) - это кожа.
Все, что мы видим на сайте — цвета, размер и выравнивание текста, отступы между элементами и их положение, задний фон — все это сделано при помощи CSS

В завершение - два наглядных видео по вышеописанному:







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