Твитнуть об этом видео
Поделиться на Facebook
Поделиться по E-mail
Что такое Интернет?
Интернет – это всемирная система объединенных компьютерных сетей, построенная на базе IP и маршрутизации IP-пакетов.
Как устроен интернет?
На изображении справа показано вовсе не звездное небо, а сеть интернет на момент 2005 года. Как можно догадаться, интернет – это сеть сетей.
Маленькие сети объединяют в себя n-ое число компьютеров. Большие сети включают в себя маленькие сети, тем самым создавая связь между ними. Ну а самые большие сети – сети континентов соединяются между собой подводным трансатлантическим оптоволоконным кабелем. Вес такого кабеля, протянутого между континентами, измеряется тысячами тонн.
Из всех континентов в этой большой игре не участвует разве что Антарктида.
На изображении слева показана упрощенная схема интернета. Существуют также большие сети, которые не объединены с общим миром интернета. Примером такой большой сети может служить сеть Северной Кореи – Кванмён. Так как у Северной Кореи интернета в принципе нету, Кванмён является его заменителем, большой местной сетью с одним провайдером. Провайдер – это организация, предоставляющая услуги. Следовательно, интернет-провайдер – компания, предоставляющая услуги интернет. В целом, можно сказать, что у Северной Кореи свой отдельный интернет. Однако, устроен интернет везде одинаково 🙂
Архитектура Клиент-Сервер
В сетях принято разделение компьютеров на клиенты и серверы. Также существуют программы-клиенты (например, браузеры) и программы-серверы (например, веб-сервер Apache).
На изображении вы видите пример двухуровневой архитектуры Клиент-Сервер. Устройства-клиенты подключаются к устройству-серверу и получают обратную связь.
Как работает интернет?
Ну а теперь давайте рассмотрим самое интересное, как работает интернет.
Нас уже не удивляет то, что за пару секунд мы получаем веб-страницу на своем экране.
Но не многие знают, как это происходит. Сейчас об этом и поговорим.
Итак, у нас есть человек, кто угодно – я, вы, или ваш дальний родственник. У этого человека есть доступ к компьютеру, который он с радостью включает. Человек хочет зайти в интернет и для этого запускает браузер, т.е. программу-клиент, установленную на его компьютере. В адресной строке браузера он вводит доменное имя сайта, допустим, info-line.net.
Это мы все знали. А что же происходит в те милисекунды, которые мы не замечаем? Что же скрыто от наших глаз?
После ввода доменного имени в браузер, программа-клиент связывается с провайдером и сообщает ему о том, что она хочет запросить сайт info-line.net
На провайдере установлен DNS сервер, который преобразует доменное имя интернет-ресурса info-line.net в IP-адрес (IP – это межсетевой протокол) вида 178.162.144.134.
IP-адрес выдается провайдером каждому компьютеру при подключении к интернету, естественно веб-сайты тоже имеют свои ip-адреса. На данный момент существует две версии IP – 4-ая (IPv4) и 6-ая (IPv6). Была еще и 5-ая версия, но она не была принята для публичного пользования. В настоящее время наиболее широко используется 4-ая версия IP.
IP-адреса нужны для нахождения компьютеров в сети. Ведь нужно знать, куда отправлять пакет. На почте, вам нужно указать адрес получателя. В сети вместо адреса выступает IP.
После этого, IP переводится из десятичной системы исчисления в двоичную и принимает привычный машинный вид в виде цифр 0 и 1.
Далее, провайдер пересылает ваш запрос сайта на маршрутизатор (или по-другому — Роутер).
Маршрутизатор – это устройство, которое согласно таблицам маршрутов направляет передаваемые пакеты информации по указанному адресу. Маршрутизатор – это что-то вроде аналога GPS-навигатора в реальной жизни, он знает маршрут и указывает рабочий путь передаваемому пакету информации.
Пакеты передаются от одного маршрутизатора к другому, пока не достигают сервера, т.е. того IP-адреса, который был указан клиентом в виде получателя.
На web-сервере обрабатывается вся полученная информация и выдается результат в виде html-страницы, то есть обычной веб-страницы, которые мы так часто видим на экране.
Данный результат отправляется по обратной цепочке через маршрутизаторы и провайдера к нашему компьютеру, после чего встает вопрос, а куда дальше-то пакеты посылать? В какую программу?
Для этого предназначены порты.
Что такое порт?
Порт – это системный ресурс, выделяемый приложению для связи с другими приложениями в сети. Все программы для связи между собою посредством сети, используют порты.
Если провести аналогию с домом, то дом – это IP, а квартира – это порт. Список портов можно посмотреть, открыв файл services по адресу: C:\Windows\System32\drivers\etc (ваш адрес может отличаться)
Как мы видим, портов здесь достаточно много. Например, порт 25 служит для отправки почты, порт 110 для ее получения. Веб-сайты работают на порту номер 80, а система DNS, о которой мы уже говорили – на порту 53.
Мы можем проверить работу портов в браузере. Если мы введем веб-сайт и после него, укажем :80, то у нас откроется веб-сайт, а если укажем :53, то получим сообщение об ошибке следующего содержания: «Данный адрес использует порт, который, как правило, не используется для работы с веб-сайтами. В целях вашей безопасности Firefox отменил данный запрос».
Порт номер 21 используется для FTP, как мы уже знаем из прошлых уроков. Порты 135-139 используются системой Windows для доступа к общим ресурсам компьютера – папкам, принтерам. Эти порты должны быть закрыты фаерволлом для Интернета в целях безопасности. Порты 3128, 8080 используются в качестве прокси-серверов. Прокси – это компьютер-посредник, например, между моим компьютером и веб-ресурсом, на который я хочу зайти. Прокси используются для самых разных целей. Бывают бесплатные и платные прокси. Настроить их можно в настройках браузера. В браузере Firefox это делается следующим образом:
- Заходим в настройки
- Переходим в «Дополнительные»
- Открываем вкладку «сеть»
- В блоке «соединение» жмем кнопку «настроить»
- Переходим на ручную настройку прокси-сервера
- Указываем данные прокси
Как посмотреть установленные соединения?
Чтобы посмотреть текущие соединения, нужно войти в командную строку:
- Нажимаем сочетание клавиш «Windows» + «R»
- Вводим в поле значение «cmd»
- Нажимаем «Ок»
Мы попали в командную строку и теперь можем увидеть текущие соединения с помощью команды netstat –an
Нам выдается список результатов установленных соединений нашего компьютера с удаленными узлами.
Узлами называются любые устройства, участвующие в соединении компьютерной сети. Например: компьютеры, телефоны, маршрутизаторы и коммутаторы.
Кстати говоря, отличие маршрутизаторов от коммутаторов заключается в том, что первые используются для соединения разнородных сетей, например: локальной сети и сети интернет. А вторые – только для однородных, например, только для локальной сети. Сами устройства – очень похожи.
Вернемся к командной строке. Текущие соединения, мы уже видим.
Итак, в первой колонке, мы замечаем, что соединения могут делиться на 2 протокола: TCP и UDP.
Протокол – это набор правил и действий, по которым должно осуществляться соединение и обмен данными между устройствами, включенными в сеть.
Оба протокола — TCP и UDP, отвечают за транспортировку данных. Отличие первого протокола (TCP) от второго (UDP) в том, что первый гарантирует доставку пакетов, а второй нет. Дальше углубляться в работу протоколов, мы не будем.
Локальный адрес – это адреса на нашем компьютере. Внешний адрес – адреса из сети. Состояние – это состояние соединения. Опять же, углубляться не будем, а просто возьмем любой внешний IP и с портом 80 и проверим, действительно ли этот веб-сайт у нас запущен. Почему я сказал веб-сайт? — Потому что на 80 порте, как нам известно, у нас располагаются веб-ресурсы.
Итак, берем IP — 212.73.221.199:80
Переходим в браузер и пишем этот IP-адрес в адресную строку. Порт писать не обязательно, потому что 80-ый порт стоит в браузерах по умолчанию.
Мы видим сайт Лаборатории Касперского. Данный сайт, у меня не был запущен в браузере. Возникает вопрос: почему нам было показано тогда данное соединение?
Ответ очевиден: потому что оно было установлено. В нашем случае, не браузером, а антивирусом, который стоит у меня на компьютере.
Вот таким вот образом, вы можете увидеть и проверить все свои установленные соединения.
И вот после всех этих мучений, данные попадают в нужную программу, в нашем случае – в браузер.
А теперь давайте, ради интереса, взглянем на весь путь прохождения пакетов от клиента к серверу.
Как посмотреть путь прохождения пакетов?
Данные от клиента к серверу и наоборот посылаются пакетами, небольшими объемами информации. Чтобы посмотреть этот путь, можно воспользоваться одной из двух похожих команд: tracert и pathping. Единственное условие, после указания команды, через пробел нужно ввести адрес, с которым будет установлена связь (т.е. проведена трассировка). Все это мы вводим в командной строке. Таким способом, мы увидим весь путь прохождения пакетов от нашего компьютера-клиента к внешнему компьютеру-серверу. То есть то, о чем, я пытался рассказать вам на картинке с маршрутизаторами и провайдерами.
Для примера, я воспользуюсь первой командой: tracert info-line.net
На примере прокладывается трассировка маршрута к сайту info-line.net или к IP – 178.162.144.134
Трассировка была проведена в 11 прыжков. Мы видим, что до самого сервера она дошла всего за 3 прыжка. Кстати говоря, таким образом, мы еще и узнали, на каких серверах располагаются сайты хостинга imhoster.net – на серверах голландского хостинга . Давайте откроем этот сайт в браузере.
Ну а после всего этого пути с одиннадцатью прыжками, человек замечает только результат html-страницы, обработанной браузером на своем компьютере. Но Вы-то теперь знаете, как это происходит.
Вот так просто и одновременно непостижимо работает интернет!
Info-line.net
Не знаю как у других но у меня что то долго твой сайт грузит близко 2 мин.
У меня интернет не такой быстрый, но за 6-7 секунд загружается любая страница. Но, я тебя услышал. Спасибо. Буду оптимизировать.
как сделать что бы маленькие изображения открывались в таком себе плеере и их можно было переключать например как ВКонтакте или других сайтах
Вконтакте плеер реализован на . Именно это позволяет ему продолжать работать при переключении страниц.
Если хотите создать подобный плеер самостоятельно — изучайте JavaScript.
На начальном этапе, я рекомендую воспользоваться онлайн-плеерами, так как они предоставят вам не только код плеера, но еще и место под музыку на своих серверах.
я пробовал делать плеер нашел на одном из сайтов но многое не понимаю а там нет где обратиться можете посмотреть здесь и мне объяснить что где ставить
Начнем с того, что это не плеер 🙂 Точно ту ссылку скинули?
Там находится плагин lightbox (плагин для увеличения изображений, а также переключения между ними в виде галереи).
Чтобы подключить данный плагин, нужно:
1. Скачать его к себе.
2. Добавить в теги
<head></head>вашего сайта следующий код:Он отвечает за подключение библиотеки jQuery и скрипта самого плагина.
3. Далее нужно подключить вот этот код:
Он отвечает за подключение таблицы стилей. Также прописывается в тегах
<head></head>.4. Для вставки изображений нужно будет использовать подобный код:
image1.jpg — это ваше изображение в большом размере.
thumb_image1.jpg — оно же, но в маленьком размере.
То есть, вы вставляете маленькое изображение, делая его ссылкой на большое.
5. Последнее, что нужно сделать, так это назначить, к каким данным следует применять наш плагин. Он ведь не знает, какие изображения нужно красиво увеличивать.
Это мы делаем с помощью javascript кода, который можно вставить в тегах
<head></head>вашей страницы.Ниже, приведено 4 способа в качестве примера. Одного способа, Вам скорее всего будет вполне достаточно.
<script type="text/javascript"> $(function() { // 1 способ $('a[@rel*=lightbox]').lightBox(); // 2 способ $('#gallery a').lightBox(); // 3 способ $('a.lightbox').lightBox(); // 4 способ $('a').lightBox(); }); </script>Как работают данные способы?
1. Если ссылка имеет атрибут rel=lightbox, то применяем скрипт lightBox.
2. Если ссылки располагаются внутри блока с идентификатором #gallery, то применяем скрипт lightBox.
3. Применяем скрипт lightBox ко всем ссылкам, имеющим класс .lightbox.
4. Применяем скрипт ко всем ссылкам на странице.
спасибо за ответ
я все сделал ка здесь написано но эти коды ставил сразу же после тега и один за другим то есть пошел первый скрипт потом пошел второй сразу после него может это неправильно. Потом там где мне нужно вставить изображения вставил код и у меня получилось что большое изображение открывается не в галерее а отдельно можете посмотреть на сайте а потом также после
я поставил
$(function() { // 1 способ $('a[@rel*=lightbox]').lightBox(); // 2 способ $('#gallery a').lightBox(); // 3 способ $('a.lightbox').lightBox(); // 4 способ $('a').lightBox(); });и оставил только 1 способ все остальное стер но в дужках я нечего не писал так как не знал нужно ли ?
И получилось что у меня не открывается изображения в галереи посмотрите на сайт как это выглядит: и код этой страницы:
<!DOCTYPE HTML Public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" media="screen" /> <script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); }); </script> <meta http-equiv= "Content-Type" content = "text/html; charset=utf-8"> <meta name="keywords" content="Музичний гурт Сузіря, весілля, день народження, корпоратив, випускний вечір, бенкет"> <meta name="description" content="Музичний гурт Сузіря"> <title>"Музичний гурт "Сузір'я"</title> <link type="text/css" rel="StyleSheet" href="/_st/my.css" /> <script type = "text/javascript" src="/jquery-1.6.2.min.js"></script> <script type = "text/javascript" src="/height_col.js"></script> <!--[if lt IE 7]> <script type = "text/javascript" src="/IE7.js"></script> <script type = "text/javascript" src="/ie7-squish.js"></script> <script type = "text/javascript" src = "js/DD_belatedPNG_0.0.8a-min.js"></script> <script> DD_belatedPNG.fix('.img1,.img2'); </script> <![endif]--> <body> <div id="wrapper"> <div id="header"> <h1><a href = "/">"Музичний гурт "Сузір'я"</a></h1> <div align="center"><p>Офіційний сайт Музичного гурту "Сузір'я" </p></div> </div> <div id="left_menu"> <div align="center"> <p>Ліве меню</p> <form name="search" action="http://google.com/search" target="_blank"> <input type="hidden" name="q" value="site:suzirja.ucoz.com/"> <p> <input type="text" name="q" maxlength="128"><br> <input type="submit" value="Знайти"> </p> </form> </div> </div> <br> <br> <br> <br> <br> <br> <br> <a href="images/large.jpg" rel="lightbox"><img src="images/small.jpg" width="200" height="150" alt="" /></a> <br> <br> <br> <br> <br> <br> <br> <div id="share42" style="top: 180px; "> <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -0px 0" href="#" onclick="window.open('http://vkontakte.ru/share.php?url=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html', '_blank', 'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=554, height=421, toolbar=0, status=0');return false" title="Поделиться В Контакте" target="_blank"></a> <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -32px 0" href="http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html&title=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82" title="Добавить в Одноклассники" target="_blank"></a> <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -128px 0" href="http://twitter.com/share?text=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82&url=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html" title="Добавить в Twitter" target="_blank"></a> <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -160px 0" href="http://www.facebook.com/sharer.php?u=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html&t=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82" title="Поделиться в Facebook" target="_blank"></a> <a rel="nofollow" style="display:block;width:32px;height:32px;margin:0 0 6px;background:url(info-line.net/share42/icons.png) -320px 0" href="http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=http%3A%2F%2Finfo-line.net%2Fvideouroki%2Fkak-ustanovit-yandeks-poisk-na-svoj-sajt.html&title=%D0%9A%D0%B0%D0%BA%20%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%82%D1%8C%20%D0%AF%D0%BD%D0%B4%D0%B5%D0%BA%D1%81.%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%20%D0%BD%D0%B0%20%D1%81%D0%B2%D0%BE%D0%B9%20%D1%81%D0%B0%D0%B9%D1%82" title="Сохранить закладку в Google" target="_blank"></a> </div> <!-- MyCounter v.2.0 --> <div id="mycounter" style="bottom: 0px;"> <script type="text/javascript"><!-- my_id = 115765; my_width = 88; my_height = 51; my_alt = "MyCounter - счётчик и статистика"; //--></script> <script type="text/javascript" src="http://scripts.mycounter.ua/counter2.0.js"> </script><noscript> <a target="_blank" href="http://mycounter.ua/"><img src="http://get.mycounter.ua/counter.php?id=115765" title="MyCounter - счётчик и статистика" alt="MyCounter - счётчик и статистика" width="88" height="51" border="0" /></a></noscript> <!--/ MyCounter --> </div> <ul id="menu"> <li id="home"> <a href="http://suzirja.ucoz.com/" title="Головна">Головна</a> </li> <li id="foto"> <a href="http://suzirja.ucoz.com/foto.html" title="Фотографії">Фотографії</a> </li> <li id="video"> <a href="http://suzirja.ucoz.com/video.html" title="Відеозаписи">Відеозаписи</a> </li> <li id="music"> <a href="http://suzirja.ucoz.com/music.html" title="Музика">Музика</a> </li> <li id="forum"> <a href="http://suzirja.ucoz.com/forum.html" title="Форум">Форум</a> </li> <li id="contact"> <a href="http://suzirja.ucoz.com/contakt.html" title="Контакти">Контакти</a> </li> </ul> <div class="clear"></div> <div id="footer"> <p>© Все права защищены 2012</p> </div> </div> </body> </html>что то я не так код написал как его написать?
Не указан атрибут к изображению, а точнее к ссылке на изображение, так как именно ссылка взаимодействует со скриптом.
То есть получается так: Вы написали к каким изображениям применять скрипт, но сами изображения не пометили.
Выбрав первый способ, скрипт применяется к ссылкам с атрибутом rel="lightbox". Добавьте в вашу ссылку данный атрибут. Должно сработать. Также поступайте со всеми остальными изображениями.
Что то не работает я вот этот скрипт:
$(function() { $('a[@rel*=lightbox]').lightBox(); });изменил на вот этот просто дописал:
$(function() { $('a[@rel*=nofollow]').lightBox(); });И не работает скорее всего я не так сделал как мне сделать если можно напишите готовый код вместо ссылки на большое изображение укажите images/big.jpg спасибо)
Ой. Я совершил опечатку по привычке 🙂 Не rel="nofollow", а rel="lightbox".
И как я уже сказал, Вам его нужно применить к ссылке. Вот так:
поставил но все равно открывает не в галерее а на полный экран можете посмотреть на сайте
Замените Ваш код скрипта:
<script type="text/javascript"> $(function() { $('a[@rel*=nofollow]').lightBox(); }); </script>на следующий:
<script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); }); </script>А как в $('a[@rel*=lightbox]').lightBox (); вписать ссылку на изображения ?
Не надо ее вписывать) Она у вас сама должна определяться скриптом.
Удалите одно из подключений библиотеки jquery на вашем сайте и загрузите скрипт lightbox, у меня выдается 404 ошибка при переходе по заявленной ссылке в коде.
Я уже совсем запутался))) То есть если у меня сайт на Укозе то мне нужно удалить из файлового менеджера файл jquery.js а откуда загрузить скрипт lightbox и куда в файловом менеджер или вписать в строку. Извините что так много вопросов 🙂
У тебя просто дважды подключена библиотека. Посмотри код 🙂
Оставить нужно одну.
Скрипт lightbox загружаешь . Он есть в архиве, да и к тому же по ссылке в статье его можно скачать.
Ничего страшного, задавай 😉
У меня стоит этот код в теге
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen"> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script>Я даже открывал архив который я скачивал в нем есть .html файл то есть пример я открыл его в гугле нажал F12 просмотрел код тоже поставил себе все равно нечего не получилось.
Этот код я вписал уже где то в середине тега там где должны быть фото:
<a href="images/large.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();"> <img src="images/small.jpg" width="72" height="72" alt="">В таблицу CSS я нечего не добавлял разве что загрузил файл .css в файловой менеджер Укоза. Вы написали нужно установить скрипт lightbox я все скрипты которые есть в архиве залил в файловой менеджер и коды у меня только эти которые я вам скинул посмотрите может что не так?
пропишите блок галереи с
id="gallery":прописал но нечего не происходит я так понимаю его надо прописывать в css но я там нечего не прописывал ведь я файл css залил в файловой менеджер и нужно написать в css что должен значить но в архиве нет нечего что относиться к
Я запишу видеоурок на эту тему чуть позже. Записал себе 🙂
Спасибо большое! Буду ждать! А когда будет какой то видео урок уже что то долго нету ?
Скоро будет. И не только видео 🙂
ОГО! А что еще если не секрет ?
Постоянная рубрика статей. Я не могу часто выпускать видеоуроки, поэтому простые материалы будет писать еще один человек.
понятно буду ждать!