Osfonder's blog Just another wd weblog

14Июн/102

Установка Dropbox на сервер из консоли

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

К делу

  1. Заходим на сервер в домашнюю директорию и скачиваем linux клиент Dropbox'a

    wget -O dropbox.tar.gz http://www.dropbox.com/download/?plat=lnx.x86
    

    или 64-битную версию

  2. Разархивируем, скачанный файл

    tar -zxof dropbox.tar.gz
  3. Запускаем клиент

    ~/.dropbox-dist/dropboxd &
    

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

Вот, собственно, и всё. Теперь в вашей домашней директории находится каталог Dropbox, который постоянно синхронизируется с остальными.

Для последующего запуска нужно использовать ту же команду

~/.dropbox-dist/dropboxd &

её следует добавить в /etc/rc.local например, для автозапуска при старте.

P.S. Для всей этой процедуры необходим, установленный на сервере Python.

Метки записи: , 2 Комментарии
9Май/100

Способы ускорения загрузки страницы часть 2

Уменьшение объема передаваемых cookie данных

Разобравшись с ускорением за счет уменьшения количества HTTP запросов поразмыслим, как ещё можно оптимизировать структуру страницы дабы увеличить скорость её загрузки.
Согласно этапам процесса загрузки страницы, на стадии передачи данных браузером отправляются cookie с каждым запросом к внешнему файлу, будь то css, js или даже изображение. Таким образом по проводам гоняются лишние данные без особой на то причины. Способ избежать этого прост:

Выносить всю статику на домены не связанные с cookie

Это может быть сабдомен или вообще другой домен. И вы часто можете наблюдать это на больших ресурсах, когда изображения и скрипты подгружаются с чего-то вроде i.yandex.st, farm1.static.flickr.com, st.deviantart.net, l.yimg.com/g/css, l.yimg.com/g/javascript, ytimg.com.

Тут есть тонкость. Куки, установленные на домене верхнего уровня osfonder.ru будут передаваться на все поддомены js.osfonder.ru, css.osfonder.ru и т.п. Если вы хотите использовать поддомены для статичных файлов, то следует устанавливать куки на сабдомене www — www.osfonder.ru.
Другой способ — это купить отдельный домен для передачи через него всех статичных файлов для вашего сайта. Например у Yandex это yandex.st, у Yahoo! — yimg.com, у youtube.com — ytimg.com.

http://i.yandex.st/weather/i/1april/ruchka.gif


Знакомо ? )

Посты по теме

  1. Разработка сайтов: Процесс загрузки страницы
  2. Способы ускорения загрузки страницы часть 1
  3. Способы ускорения загрузки страницы часть 3
1Май/101

Способы ускорения загрузки страницы часть 1

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

В первой части:

Уменьшение количества HTTP запросов

Как говорилось в вышеуказанном посте для каждого внешнего файла, будь то JS скрипт, CSS стиль или фоновая картинка, устанавливается новое HTTP соединение, влекущее за собой затратные по времени процедуры.
Решение очевидно, нужно уменьшать до минимума количество таких запросов.

JavaScript файлы

Здесь расклады простые браузеру для нормального отображения страницы абсолютно все равно. Загружать несколько js скриптов с форматированием и всеми делами или один сжатый и не читабельный. Он являет собой кусок машинного кода и все человеческое ему чуждо. Но в первом случае количество запросов будет больше одного и лишние пробелы и табы, прибавят веса, во втором же понадобиться лишь один запрос и меньший размер файла.

Сжать несколько файлов в один, убрав лишние символы можно просто. Приведу один из инструментов, на который жаловаться не приходилось.
Это продукт от google — google closure compiler. Проще всего его использовать online (если размер файлов не превышает допустимых пределов), но можно использовать и стэндалон в виде java приложения у себя на компьютере.
Есть еще вариант который раньше очень был распространен dean edwards packer.

CSS стили

Тут абсолютно тот же способ, что и с js файлами — на этапе разработки разделяй и властвуй, но на "продакшн", где возможно, объединяй в один файл. CleanCSS в помощь.

Графические файлы

Тут есть два способа по уменьшению количества запросов.

1. Это т.н. технология спрайтов. Для всех не повторяющихся(no-repeat) изображений, используемых в дизайне мы создаем один, только один графический файл, куда помещаем их все, без зазора. В при указании бэкграунда, для элементов используем этот файл, устанавливая нужный фрагмент большого файла на фон позиционированием.
Для всех градиентов и прочего, что требует репита создается другой файл, шириной один пиксель. И опять же нужный фрагмент выбирается позиционированием.
Вот пример. Спрайт используемый на фэйсбуке (7.5 Кб)

2. Все небольшие изображения, вроде значков 8x8 пикселов и т.п. прописываются прямо в CSS или src изображения в виде base64 кодирования текста. Сложно? вот пример:


или для CSS:


Особенно такой способ в почете у однопиксельных градиентов.
Кодировщик (один из)

Посты по теме

  1. Разработка сайтов: Процесс загрузки страницы
  2. Способы ускорения загрузки страницы часть 2
  3. Способы ускорения загрузки страницы часть 3
Метки записи: , 1 комментарий
17Апр/100

Внешний вид mod_autoindex или организация FTP

У вас есть сервер, который вы используете(в том числе) для хранения файлов и доступа к ним из любого места через интернет-браузер, а файлы, скорее всего, заливаете по FTP.
Если да, то скорее всего вам знакома такая картина

А нет, извините, вам знакома такая


Это стандартная выдача mod_autoindex сервера apache.

Но предлагаю немного упростить себе жизнь и превратить
её в такую.

Да и вообще в онлайн плеер.

Можно это сделать, установив по умолчанию индексным файлом, например, php скрипт, который и будет делать всю черную работу. Есть проект на sourceforge посвященный этому(autoindex).

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

Большую часть работы по этому уже проделана. Результат её здесь.

Доработанную её версию вам и предлагаю.

Загрузка

Скачать

Нужно просто распаковать архив в корень вашего ФТП хранилища.

Возможности

  1. Сортировка по имени, дате модификации, размеру, типу
  2. Предпросмотр фотографий и изображений
  3. Онлайн прослушивание mp3 файлов

Ну и приглядный внешний вид с иконками.

Техническая сторона

Ну и на последок немного технической информации.

  1. Предпросмотр изображений выполнен с помощью YUI Tooltip
  2. Проигрыватель музыкальных файлов Yahoo! Media Player
  3. JavaScript'ы и устанавливаются в обрамляющих выдачу файлах(см. .htaccess ниже)

P.S. Музыка на скриншоте моих друзей Waterplea, пишущих большей частью ambient.

#Файлы, вставляемые до и после выдачи(в них и крепяться стили и javascript'ы)
HeaderName /indexoverride/HEADER.html
ReadmeName /indexoverride/FOOTER.html
#Запрещаем в выдаче ненужные и системные файлы
IndexIgnore .htaccess indexoverride Thumbs.db .??* *~ *# RCS CVS *,v *,t

#Соритировка по умолчанию
IndexOrderDefault Ascending Description

#Настроки структуры выдачи
IndexOptions FancyIndexing FoldersFirst IconsAreLinks NameWidth=* IconWidth=32 IconHeight=32

#Кодировка по умолчанию
IndexOptions Charset=UTF-8

#Иконки и описания по расширениям файлов
AddIcon (IMG,/indexoverride/image.png) .jpg .JPG .png .PNG .bmp .BMP .svg .SVG .gif .GIF .wmf .WMF .psd .PSD
AddDescription "image / PNG" 		*.png *.PNG
AddDescription "image / JPG" 		*.jpg *.JPG
AddDescription "image / BMP" 		*.bmp *.BMP
AddDescription "image / SVG" 		*.svg *.SVG
AddDescription "image / GIF" 		*.gif *.GIF
AddDescription "image / WMF" 		*.wmf *.WMF
AddDescription "image / PSD" 		*.psd *.PSD

AddIcon (AUDIO,/indexoverride/audio.png) .mp3 .MP3 .wav .WAV .ogg .OGG
AddDescription "audio / MP3" 		*.mp3 *.MP3
AddDescription "audio / OGG" 		*.ogg *.OGG

AddIcon (VIDEO,/indexoverride/video.png) .mov .MOV .avi .AVI .mpg .MPG
AddDescription "video / QuickTime" 	*.mov *.MOV
AddDescription "image / AVI" 		*.avi *.AVI
AddDescription "image / MPEG" 		*.mpg *.MPG

AddIcon (FLA,/indexoverride/flash_src.png) .fla .FLA .as .AS
AddDescription "flash / FLA" 		*.fla *.FLA
AddDescription "flash / AS" 		*.as  *.AS

AddIcon (SWF,/indexoverride/swf.png) .swf .SWF
AddDescription "flash / SWF" 		*.swf *.SWF

AddIcon (TXT,/indexoverride/text.png) .txt .TXT
AddDescription "document / TXT" 	*.txt *.TXT

AddIcon (XLS,/indexoverride/xls.png) .xls .XLS .csv .CSV
AddDescription "document / XLS" 	*.xls *.XLS
AddDescription "document / CSV" 	*.csv *.CSV

AddIcon (DOC,/indexoverride/doc.png) .doc .DOC
AddDescription "document / DOC" *.doc *.DOC

AddIcon (PPT,/indexoverride/ppt.png) .ppt .PPT
AddDescription "document / PPT" *.ppt *.PPT

AddIcon (PHP,/indexoverride/php.png) .php .PHP
AddDescription "PHP" *.php *.PHP

AddIcon (HTM,/indexoverride/html.png) .htm .html .HTM .HTML
AddDescription "HTML" *.htm* *.HTM*

AddIcon (HTM,/indexoverride/css.png) .css .CSS
AddDescription "CSS" *.css *.CSS

AddIcon (ARCHIVE,/indexoverride/archive.png) .zip .rar .arj .arc .tar .targz .gz .Z
AddDescription "Archive / ZIP" *.zip *.ZIP
AddDescription "Archive / RAR" *.rar *.RAR
AddDescription "Archive / ARJ" *.arj *.ARJ
AddDescription "Archive / ARC" *.arc *.ARC
AddDescription "Archive / TAR" *.tar *.TAR
AddDescription "Archive / GZ" *.gz *.GZ
AddDescription "Archive / TARGZ" *.targz *.TARGZ
AddDescription "Archive / compress" *.Z

#Иконка для родительской дирректории
AddIcon (PAR,/indexoverride/dir.png) ..

#Иконка по умолчанию
DefaultIcon /indexoverride/default.png

#Иконки по типам
AddIconByType (TXT,/indexoverride/text.png) text/*
AddIconByType (IMG,/indexoverride/image.png) image/*
AddIconByType (VID,/indexoverride/video.png) video/*
AddIconByEncoding (CMP,/indexoverride/archive.png) x-compress x-gzip