Теле2 

Сделать свой файлообменник. Заработок на файлообменниках

Работая над книгой о jquery , я столкнулся с тем, что многие мои подписчики просили меня рассказать в ней как на jquery написать скрипт слайдера. Пардон, дорогие друзья! На дворе XXI век и, на наше счастье, нам доступны все прелести CSS3 , позволяющие реализовать подобные вещи без единой строчки javascript .

Часть 1.

Для начала, поясню тем, кто не знает что такое слайдер. Слайдер - это определенный ширины блок, занимающий часть веб-страницы, или же всю ее целиком. Основная его особенность в изменяющемся в автоматическом или ручном режиме контенте. В качестве контента могут выступать как графические изображения, так и некий текст.

Конечно, вы можете поинтересоваться: зачем изобретать велосипед, если полно реализаций слайдеров на javascript? Вот мои аргументы:

  • CSS эффекты работают быстрее. Это хорошо заметно на мобильных устройствах.
  • Чтобы создать слайдер не требуются навыки программирования.

    • Итак, для нашего примера, вам нужно четыре изображения, хотя в своем проекте вы можете сделать полоску с таким количеством изображений, какое вам нужно. Единственным условием является то, что все изображения должны быть одинакового размера. Еще, забыл вам сказать, наш слайдер будет адаптивным (да-да, адаптивная верстка , вы не ошиблись) и вы сможете использовать его в любых своих проектах для любых устройств. Но, довольно болтовни, у меня уже руки чешутся написать мега-код. Начнем с HTML :

    Я оставил пустым атрибут alt , чтобы сэкономить место, Вы же можете его заполнить сами, исходя из ваших SEO запросов и для информирования пользователей, отключивших в браузере показ картинок. Хочу также обратить ваше внимание на то, что первое изображение (alladin.jpg ) будет присутствовать и в конце полосы, что позволит нашему слайдеру прокручиваться циклично без рывков.

    Для удобства width составляет 80% окна, а max-width соответствует размеру каждой отдельной фотографии (1000 пикселей в нашем примере), поскольку нам не нужно растянутое изображение:

    Slider { width: 80%; max-width: 1000px; }

    В нашем коде CSS, ширина figure выражена в процентном отношении к div , в котором она расположена. То есть, если полоса изображений содержит пять фотографий, а div выдает всего одно, ширина figure увеличивается в пять раз, что составляет 500% ширины контейнера div:

    Параметр font-size: 0 выкачивает из figure весь воздух, удаляя свободное пространство вокруг изображений и между ними. position: relative позволяет легко перемещать figure во время анимации.

    Нам нужно поровну разделить фотографии внутри полосы изображений. Формула очень проста: если мы предположим, что ширина figure составляет 100%, каждое изображение должно занимать 1/5 горизонтального пространства:

    Возникает потребность в использовании следующего CSS правила:

    Imagestrip img { width: 20%; height: auto; }

    Теперь поменяем свойство overflow для div:

    Slider { width: 80%; max-width: 1000px; overflow: hidden }

    Наконец, нам надо сделать так, чтобы полоса изображений перемещалась слева направо. Если ширина контейнера div составляет 100%, каждое движение полосы изображений влево будет измеряться в процентных долях этого расстояния:

    @keyframes slidy { 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -200%; } 70% { left: -200%; } 75% { left: -300%; } 95% { left: -300%; } 100% { left: -400%; } }

    Каждое изображение на слайдере будет заключено в div и будет перемещаться на 5%.

    Slider figure { position: relative; width: 500%; animation: 30s slidy infinite; font-size: 0; padding: 0; margin: 0; left: 0; }

    Часть 2.

    Мы сделали мега-крутой слайдер без javascript . А давайте, прежде чем пойти почивать на лаврах, добавим в него кнопки управления. Точнее, не в него (с ним мне уже лень возиться), а создадим новый.


    Так, наш HTML код:

    Теперь позаботимся об анимации наших слайдов. К сожалению, для разного числа слайдов она будет отличаться:

    /* для слайдера из двух слайдов */ @keyframes slider__item-autoplay_count_2 { 0%{opacity:0;} 20%{opacity:1;} 50%{opacity:1;} 70%{opacity:0;} 100%{opacity:0;} } /* для слайдера из трех слайдов */ @keyframes slider__item-autoplay_count_3 { 0%{opacity:0;} 10%{opacity:1;} 33% {opacity:1;} 43% {opacity:0;} 100%{opacity:0;} } /* для слайдера из четырех слайдов */ @keyframes slider__item-autoplay_count_4 { 0%{opacity:0;} 8% {opacity:1;} 25% {opacity:1;} 33% {opacity:0;} 100%{opacity:0;} } /* для слайдера из пяти слайдов */ @keyframes slider__item-autoplay_count_5 { 0%{opacity:0;} 7% {opacity:1;} 20%{opacity:1;} 27% {opacity:0;} 100%{opacity:0;} }

    Печально, не так ли? Кроме того, не забудьте, что для Оперы, Хрома, ИЕ, и Мозиллы нужно написать все тоже самое, но с соответствующим префиксом. Теперь напишем код для анимации наших слайдов (здесь и далее будет показан код для трех слайдов. Код для большего числа сайтов Вы можете увидеть в коде примера):

    Slider_count_3 .item { -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item-autoplay_count_3 15s infinite; animation: slider__item-autoplay_count_3 15s infinite; } .item:nth-of-type(2) { -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; } .item:nth-of-type(3) { -moz-animation-delay:10s; -webkit-animation-delay:10s; -o-animation-delay:10s; animation-delay:10s; }

    Как видите, для первой пары нулевое смещение не меняется. Кроме того, смещение не зависит от количества слайдов, поэтому его можно описать один раз для максимального числа слайдов. Теперь сделаем так, чтобы слайды не менялись, когда пользователь навел курсор мыши на наш слайдер:

    Slider:hover .item { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; -o-animation-play-state: paused; animation-play-state: paused; }

    Наконец, мы с вами добрались до переключения наших слайдов. Как известно, есть целый ряд событий, позволяющих менять свойства элемента при помощи CSS. Для клика мыши нам могут помочь псевдоклассы :focus , :target , или :checked у одного из элементов страницы. Псевдокласс:focus может быть только у одного элемента на страницу, :target засоряет историю браузера и требует наличие тега ; псевдокласс:checked запоминает состояние до ухода со страницы, и, в случае радиокнопок, может быть выбран только у одного элемента в группе. Воспользуемся этим. Вставим перед следующий HTML код

    А после :

    1 2 3

    /* Стиль слайдеров в состоянии "не выбран" */ .slider .item ~ .item { opacity: 0.0; } /* Стиль слайдеров в состоянии "выбран" */ .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) { opacity: 1.0; }

    Мы использовали переключение свойства opacity слайда-контейнера с картинкой. Это связано с тем, что в div-контейнер, в отличие от элемента img, можно поместить любую дополнительную информацию (например, название слайда). Конечно, если бы мы пользовались Javascript, мы могли бы воспользоваться атрибутом data. Но мы с вами договорились, помните?)) Для слайдов укажем свойства transition, чтобы переключение происходило плавно, а не рывками.

    Slider .item { -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; transition: opacity 0.2s linear; }

    Остановка анимации всех слайдов и кнопок при выборе любого слайда осуществим при помощи следующего CSS кода:

    Slider input:checked ~ .item { opacity: 0.0; -moz-animation: none; -webkit-animation: none; -o-animation: none; animation: none; }

    Для поддержки некоторых старых браузеров мы не анимируем первый слайд, установив для него opacity: 1.0 , но при этом мы поимеем проблему: при плавном переключении двух других слайдов между собой, первый слайд просвечивает. Для ликвидации этого бага устанавливаем задержку transition-delay для всех слайдов, кроме выбранного, а для него сделаем z-index больше, чем у всех остальных слайдов:

    Slider .item { opacity: 1.0; -moz-transition: opacity 0.0s linear 0.2s; -webkit-transition: opacity 0.0s linear 0.2s; -o-transition: opacity 0.0s linear 0.2s; transition: opacity 0.0s linear 0.2s; } .slider input:nth-of-type(1):checked ~ .item:nth-of-type(1), .slider input:nth-of-type(2):checked ~ .item:nth-of-type(2), .slider input:nth-of-type(3):checked ~ .item:nth-of-type(3), .slider input:nth-of-type(4):checked ~ .item:nth-of-type(4), .slider input:nth-of-type(5):checked ~ .item:nth-of-type(5) { transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; z-index: 6; }

    Чтобы слайды не конфликтовали с другими элементами сайта (например, не перекрывали выпадающее меню с z-index менее или равным 6), создаем свой контекст для блока путем задания минимально, необходимого для видимости, z-index:

    Slider { position: relative; z-index: 0; }

    Вот собственно говоря и все. Осталось только спозиционировать наши элементы с помощью нижеследующего CSS кода и можно радоваться:

    Slider { position: relative; z-index:0; } .slider input { display: none; } .slider label { bottom: 10px; display: inline-block; z-index: 2; width: 26px; height: 27px; background: #f4f4f5; border: 1px solid #e6e6e6; border-bottom-color: #bfbfbf; border-radius: 4px; box-shadow: inset 0 1px 0 #ffffff, 0 1px 2px #000000; text-align: center; cursor: pointer; font: 14px/27px arial, tahoma; color: #333; } .slider .selector_list { position: absolute; bottom: 15px; right: 15px; z-index: 11; } .slider .item { position: relative; width:100%; } .slider .item ~ .item { position: absolute; top: 0px; left: 0px; }

    Вот такой адаптивный слайдер без Javascript на CSS3 у вас должен получиться в итоге.

    В данном уроке мы создадим простую адаптивную страницу с заголовком, украшенным каруселью, в которой изображения проскальзывают справа налево. Наше решение не использует JavaScript, слайдшоу основано на анимациях CSS3, которые поддерживаются в большинстве современных браузеров: Firefoх 15+, Chrome 22+, Safari 5.1+, Opera 12.1+ и IE10.

    Шаг 1 - Подготовительный

    Нам потребуется 4 больших изображения (в нашем примере используется размер 1200px x 390px). Для горизонтального слайдера мы подготовим картинку размером 4800px x 390px в Photoshop, все наши изображения разместим одно за другим по горизонтали и сохраним результат в пригодном для веб пространства формате (“slider-horizontal.jpg ”).

    Шаг 2 - HTML

    В действительности мы будем анимировать свойство background-position для нашего заголовка. Сам заголовок имеет очень простую разметку:

    L"ile de Batz

    Полный код страницы выглядит следующим образом:

    L"ile de Batz Once upon a time…

    Aenean lacinia bibendum ...

    Links to learn by heart..

    Шаг 3. CSS для мобильных устройств

    Мы начнем определять стили для мобильных устройств. Зададим основу дизайна, а затем добавим расширения шаблона для больших экранов. В тексте урока приводятся только основные свойства, полный код можно посмотреть в исходниках:

    Body { width: 90%; min-width: 300px; max-width: 1200px; margin: 0 auto; padding-top: 1em; color: #504331 } header { text-align: center; position: relative; } h1 { font-size: 2.75em; background: white; display: inline-block; padding: 0 10px; margin-bottom: .25em; } h1:after { content: ""; height: 2px; display: block; position: absolute; left: 0; right: 0; top: .5em; z-index: -1; border-top: 1px solid #504331; border-bottom: 1px solid #504331; } .links { background: url(../images/map.png) bottom center no-repeat; padding-bottom: 177px; }

    Шаг 4. Стили для больших экранов

    На больших экранах секции .main и .screen должны отображаться по другому. Секция .link будет иметь ширину 300px и позиционироваться как правая боковая панель, а секция .main останется слева. Также добавим двойную линию для разделения секций. Определять ширину экрана больше 1024px будем с помощью запроса @media:

    @media only screen and (min-width: 1024px) { .content { position: relative; } .main { margin-right: 320px; padding: .5em 20px .5em 0; /*add a double line */ border-right: 1px solid #504331; box-shadow: 2px 0 white, 3px 0 #504331; } .links { position: absolute; right: 0; top: 0; width: 300px; text-align: right; } }

    Шаг 5. Адаптивные изображения в заголовке

    Начнем работу над основной частью нашего урока: адаптивный слайдер на CSS в заголовке. Сначала обеспечим адаптивность фонового изображения.

    Header { background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; }

    С помощью двух значений, выраженных в процентах (400% для свойства background-size и 32.5% для нижнего отступа) фон заголовка будет выводиться корректно вне зависимости от размера экрана.

    Почему 400% ? У нас есть 4 слайда, поэтому выводиться будет 1/4 от фонового изображения в заголовке. То есть, размер фона должен быть в 4 раза шире чем заголовок.

    Почему 32.5%? Мы позиционируем наш фон внизу заголовка. Высота фонового изображения 390px, ширина отдельного слайда 1200px, 390/1200 = 0.325, то есть высота составляет 32.5% ширины.

    Шаг 6. Анимация

    Мы будем анимировать свойство background-position . Чтобы выводилось второе изображение свойство background-position должно иметь значение 33.33333% bottom , третье - 66.66667% bottom , а четвертое - 100% bottom . Первое изображение выводится при значении свойства background-position равном 0 bottom или 133.33333% bottom (мы устанавливаем для повторений значение repeat-x ).

    Каждое изображение имеет 25% от времени "славы". Первое выводится от 0 до 25%, второе - от 25% до 50%, третье - от 50% до 75%, а последнее - от 75% до 100%. Мы устанавливаем переходы так, чтобы изображение начинало выскальзывать немного раньше (используем значение 5%) прежде, чем истекут 25% его времени вывода. Вот так выглядит @keyframes :

    @keyframes h_slide { 0% { background-position: 0% bottom; } 20% { background-position: 0% bottom; } 25% { background-position: 33.33333% bottom; } 45% { background-position: 33.33333% bottom; } 50% { background-position: 66.66667% bottom; } 70% { background-position: 66.66667% bottom; } 75% { background-position: 100% bottom; } 95% { background-position: 100% bottom; } 100% { background-position: 133.33% bottom; } }

    Обратите внимание, что нужно добавить префиксы браузеров: @-webkit-keyframes (для Chrome, Safari, iOS Safari, Android) и @-moz-keyframes (для Firefox 15).

    Ниже приводится полный код заголовка. Наша анимация “h_slide” повторяется каждые 24 с (6 с для каждого слайда) в бесконечном цикле. Функция времени имеет значение ease-out , так что каждый слайд замедляется в конце перехода.

    Header { text-align: center; position: relative; background: url(../images/slider-horizontal.jpg) 0 bottom repeat-x; background-size: 400%; padding-bottom: 32.5%; -webkit-animation: h_slide 24s ease-out infinite; -moz-animation: h_slide 24s ease-out infinite; animation: h_slide 24s ease-out infinite; }

    Сегодня облачные сервисы являются одной из самых перспективных областей для обеспечения сохранности данных пользователя и файлообменник Яндекс не является исключением.

    Использование облачных технологий практически полностью исключает вероятность потери информации. Все файлы хранятся на удаленных серверах поставщика услуг. В случае сбоя операционной системы или поломки компьютера, данные не пострадают.

    Облако от Yandex – это новый проект успешной российской ИТ-компании.

    Благодаря выгодным условиям и бесперебойной работе сервиса, за год к обменнику присоединилось более миллиона пользователей.

    Рассмотрим детальнее, почему стоит использовать Яндекс.Диск, как зарегистрировать свой аккаунт и начать работу.

    Преимущества файлообменника от Yandex

    Размещая файл в облаке, юзер использует свою персональную страницу. Ее функционал одновременно напоминает файловую систему и стандартный жесткий диск. Основные преимущества хранилища от Yandex:

    • Уникальная система защиты данных. Работая с клиентской программой, вы сможете защитить свои файлы с помощью надежной системы шифрования и передачи информации по защищенным потокам. Такой алгоритм работы сводит к минимуму хищение данных или внедрение вирусных программ на ваш диск;
    • Большое количество свободного места. Яндекс предоставляет своим пользователям 10 ГБ бесплатного места. Это больше, чем бесплатный лимит таких популярных хранилищ как One Drive или DropBox ;
    • Наличие программного обеспечения для мобильных и десктопных операционных систем. Благодаря клиентским приложениям, вы сможете получить мгновенный доступ к своим файлам, где бы ни находились. Для входа в диск требуется лишь соединение с глобальной сетью;
    • Простой интерфейс. Интуитивно-понятное меню и расположение папок позволяют быстро разобраться с функционалом облачного хранилища;
    • Пользователи могут восстановить удаленные по ошибке или поврежденные данные. Это возможно благодаря резервному копированию архивов с информацией;
    • Возможность отправки документа другому пользователю и режим группового редактирования офисных файлов.

    На самом деле, облако от Yandex имеет массу полезных функций, которые существенно упростят вашу работу за компьютером.

    Как зарегистрироваться в Yandex Disk?

    Аккаунт в Яндекс.Диск имеют все пользователи, которые зарегистрированы в системе Yandex. Единый профиль позволяет использовать все сервисы и проекты компании, а именно:

    • Поисковую систему;
    • Яндекс.Деньги;
    • Переводчик;
    • Карты;
    • Яндекс.Диск;
    • Маркет;
    • Музыка и другие сервисы.

    Если у вас нет аккаунта в системе, создайте его, следуя инструкции :

    1. Зайдите на главную страницу поисковой системы Яндекс и кликните на вкладку «Завести почту» ;

    Рис. 1 – стартовая страница Yandex

    2. В новом окне укажите все необходимые данные и нажмите на «Зарегистрироваться» ;

    Рис. 2 – процедура регистрации

    3. Для того чтобы ваш аккаунт был защищен от взлома, желательно, привязать к нему номер мобильного телефона. В качестве подтверждения регистрации на него придет смс с кодом, который нужно вести в окне заполнения данных. Если вы не хотите привязывать номер, просто выберите контрольный вопрос и введите ответ. Готово, теперь у вас есть своя страничка в Yandex.

    Рис. 3 – страница почтового сервиса в Яндекс

    После регистрации вы будете автоматически перенаправлены на страницу почты. Чтобы открыть хранилище кликните на пункт под названием «Диск» в верхней части страницы. Произойдет мгновенный переход в облако.

    Рис. 4 – стартовая страница файлообменника

    Обратите внимание, что на диске уже будут присутствовать несколько картинок, папок и музыкальных файлов. Они не занимают много пространства. С их помощью начинающий пользователь сервиса сможет быстрее сориентироваться в том, каким образом хранятся документы на сайте.

    Чтобы посмотреть оставшееся место на диске, кликните на клавишу «Купить еще» в левом нижнем углу. А также, возле этой кнопки отображается поле, которое показывает степень загрузки облака. В открывшемся окне вы можете поучаствовать в бесплатной бонусной программе или приобрести дополнительное место за деньги.

    Проверка памяти и стоимость платной подписки. Как получить место бесплатно?

    За превышение максимального лимита свободного пространства придется доплатить. Если 10 ГБ вполне хватит для рядового пользователя, то для крупных компаний и предприятий этой цифры недостаточно.

    Рис. 5 – проверка свободного места в облаке

    Крупным предприятиям намного выгоднее использовать удаленные хранилища, ведь нет необходимости покупать дополнительные жесткие диски, серверные стойки и другое дорогостоящее оборудование для работы. За вас все это уже сделали в Yandex . Чтобы увеличить свободное место, достаточно купить его за символическую плату.

    Все аналогичные облачные сервисы также предоставляют возможность покупки памяти, однако, цена за 10 ГБ может варьироваться в пределах от 1 до 5 долларов за месяц использования. Расценки Яндекса намного лояльнее:

    • 10 ГБ за 30 рублей в месяц или 300 рублей в год;
    • 100 ГБ за 80 рублей в месяц или 800 рублей в год;
    • 1 ТБ за 200 рублей в месяц или 2 тыс. рублей в год.

    Как видите, чем больше места вы покупаете и чем длительнее период использования, тем выгоднее будет цена. Благодаря таким бюджетным расценкам и бонусным программам компания Yandex постоянно привлекает новых пользователей.

    Бонусные программы – это специальные акции, которые позволяют получить дополнительное место совершенно бесплатно и навсегда.

    За каждого приглашенного друга вы можете получить по 512 МБ данных. Обратите внимание, что таким способом вы можете набрать максимум 10 ГБ. Суть приглашения состоит в том, что вы генерируете уникальную ссылку или отсылаете письмо на email другу.

    Сделать это можно, нажав на поле «Пригласить друзей» в окне увеличения объема хранилища. Появится следующая страница:

    Рис. 6 – генерация приглашения в облако

    Скопируйте ссылку и отправьте ее другу или пришлите ему на электронную почту (укажите адрес в выделенном на рисунке выше текстовом поле) письмо для регистрации. Если человек присоединиться к сервису, на вашу страничку автоматически придут бонусные мегабайты, а ваш друг получит 1 ГБ дополнительного пространства.

    Второй способ бесплатного получения места – это наличие акций от партнеров. Следите за этим разделом, чтобы узнать обо всех актуальных предложениях. К примеру, при покупке техники или другой продукции спонсора, вам будут приходить бонусные ГБ. Максимально так можно увеличить пространство на 50 ГБ.

    Базовые функции сервиса

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

    Самая простая и в то же время необходимая процедура – это загрузка файлов на диск. Чтобы выполнить это действие, следует зайти на главную страницу диска в верхней части окна и нажать на желтую клавишу «Загрузить» .

    После нажатия на кнопку появится файловый проводник вашего компьютера. Выберите необходимый файл и дважды кликните по нему мышкой. Загрузка объекта на сервис произойдет автоматически. Файл будет отображаться в основном окне.

    Чтобы скачать файл из облака на компьютер, кликните на объекте. В правой части страницы появится окно опций документа. Нажмите на клавишу со стрелкой. Скачивание начнется автоматически.

    Рис. 8 – скачивание файла

    Создание файлов и папок

    А также, вы можете создавать новые файлы и папки и работать с ними прямо в облаке. Для этого, кликните на кнопку «Создать» и выпадающем списке выберите тип документа.

    Рис. 9 – создание документа

    Работа с офисными файлами происходит благодаря использованию портала MS Office Online, который является официальным продуктом компании Microsoft и полностью идентичен со своими десктопными версиями приложений.

    Одна из самых полезных функций облачных сервисов – возможность отправки любого файла другому пользователю с помощью прямой ссылки доступа. При этом необязательно, чтобы другие пользователи имели свои аккаунты в хранилище. Отправить адрес вы можете по почте, через форум или в любой социальной сети.

    Чтобы отключить режим общего доступа к файлу, достаточно просто деактивировать ползунок напротив его ссылки.

    Помните, если вы хотите создать режим группового редактирования документа, необходимо позаботиться о том, чтобы все пользователи были зарегистрированы в облачном хранилище. Юзеры, у которых нет аккаунта, смогут только просматривать содержимое.

    Удаление и восстановление документов

    Чтобы удалить документ, кликните на него и в окне опций нажмите на значок корзины. Файл будет удален автоматически.

    Рис. 11 – удаление объекта

    Заметьте, что после удаления файл можно восстановить в любой момент, ведь он добавляется в корзину. Файлы в корзине также занимают дисковое пространство, однако, они не отображаются в основном окне. Чтобы удалить объект окончательно без возможности восстановления, перейдите в окно корзины (левая нижняя часть страницы).

    Выберите документ и кликните на значок «Удалить навсегда» :

    Рис. 12 – удаление файла из корзины

    Установка десктопной программы

    Для упрощения работы с сервисом, пользователи могут установить клиентскую программу на свой компьютер. С ее помощью можно хранить документы одновременно и на ПК, и на облаке или только на облаке.

    Загрузить приложение для вашей платформы можно, нажав на соответствующую иконку в главном окне диска:

    Рис. 13 – скачивание программы для ПК

    На открывшейся странице выберите подходящий для вас тип хранения данных и нажмите на клавишу «Скачать» :

    Рис. 14 – выбор типа программы

    Выполните инсталляцию скачанной программы и войдите в свой аккаунт

    После установки приложения на компьютере появится папка Яндекс.Диск, в которую вы сможете добавлять любые файлы и папки. Они будут автоматически синхронизироваться с облаком и загружаться на сервис.

    С помощью десктопного клиента вы сможете просматривать список файлов, выполнять все базовые действия с ними, добавлять новую информацию на диск, а также создавать ссылки доступа к объектам.

    Рис. 15 – внешний вид файлообменника Яндекс для ПК

    Приложение также доступно для Mac OS и мобильных операционных систем IOS, Android, Windows Phone.

    Какой то время назад я подумал: а зачем я даю скачивать файлы со своего сайта (просто linux) бесплатно? Я пишу статьи, подбираю файлы, раскручиваю сайт, а человек попользовался моим трудом и даже спасибо не сказал? И я решил самые часто загружаемые файлы , чтобы хоть немного заработать. Теперь загрузка файлов стала приносить мне деньги...

    И я заработал несколько долларов, но потом я осознал: а зачем я даю зарабатывать этим файлообменникам на моих файлах, не могу ли я делать тоже самое, что делают они? Ведь суть их заработка проста: я загружаю им файлы, они включают задержку на скачивание, а в это время показывают рекламу.

    У меня свой VPS хостинг и есть 10 гигабайт свободного места как минимум, не закачать ли мне все файлы себе и не сделать ли такую же систему скачивания с задержкой и показом рекламы?

    Как создать свой файлообменник?

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

    Нашел я один скрипт с похожими функциями и решил его немного переделать. Всё было в одном php файле, что меня совершенно не устраивало, так как хотелось, чтобы все было проще при закачке фалов и установки рекламы в код. Вот что у меня получилось.

    Вначале нам нужно создать на хостинге в любом месте папку, где мы будем хранить конфигурационные файлы..

    Так же нужно создать папку, в которой будут храниться файлы для скачивания..

    Теперь нам нужно будет создать один важный файл, с названием 1.php - название ОБЯЗАТЕЛЬНО сохранить, иначе работать не будет. (просто название завязано со вторым файлом, который будет дан ниже)

    SEO Forex Download function countdownRedirect() { var TARG_ID = "count_red"; var e = document.getElementById(TARG_ID); var cTicks = parseInt(e.innerHTML); var timer = setInterval(function() { if(cTicks > 0) { e.innerHTML = cTicks--; } else { clearInterval(timer); location.replace("

    Как видите, я вписал в код путь к файлу, это и все, что нужно сделать при загрузке каждого файла: создать такой новый уникальный файл и вписать в него путь к загружаемому файлу. Цифра 30 означает количество секунд перед началом загрузки, можете указать любое.

    Ну вот и все, как видите, ничего сложного. Теперь расскажу немного плюсах такого подхода.

    1. Поведенческие факторы . Открывается новая страница, а значит увеличивается глубина просмотра. Пока человек ждет начала загрузки файла, он не уходит со страницы, а значит больше проводит времени на сайте. В итоге за месяц я имею лишних 3700 просмотров страниц более 30 секунд каждый:

    2. Заработок . На страницу загрузки ставим рекламу, пока человек ждет начала загрузки, ему скучно, и он может кликнуть по рекламе. Или ставим рекламы с оплатой за показы, тогда ее можно напихать побольше. В общем все как на .

    Вот такой файлообменник я сделал на своих сайтах, загрузка файлов теперь мне полностью подвластна и от этого польза существенная. Будут вопросы - пишите в комментариях, всегда всем отвечаю...

    СОВЕТ ВЕБМАСТЕРУ: Умение зарабатывать в интернете - это только пол дела, вторая половина - это умение ВЫГОДНО обналичивать электронные деньги. Вот список офшорных банковских карт, на которые можно выводить средства и потом снимать с них хрустящие купюры:

    1. Payoneer - Самая популярная в мире платежная система для фрилансеров. Выдает карты, находится в США.

    2. EpayService - Американская платежная система, очень популярна во многих странах, бесплатно дает карту MasterCard в EVRO для жителей СНГ и Европы.

    3. Skrill - Единственная платежная система которая работает с криптовалютами и при этом выпускает бесплатные банковские карты MasterCard.

    4. AdvCash - Офшорный банк находится в Белизе, можно открыть счет в долларах, евро, фунтах и рублях.

    5. Payeer - Штаб квартира этой платежной системы находится в Грузии, тут так же можно открыть счет в долларах, евро и рублях.


    Домен RU - 99 руб
    Домен РФ - 99 руб


    Есть вопросы?

    Сообщить об опечатке

    Текст, который будет отправлен нашим редакторам:

    Отправить