15.05.2011, 22:06
|
Новичок на форуме
|
|
Регистрация: 15.05.2011
Сообщений: 2
|
|
Превью сайта
Добрый день. Стал вопрос реализовать превью сайта по указанной ссылке, возможно ли на javascript такое?
Выглядит примерно таким образом. Пользователь вставляет ссылку на сайт. В превью должна отобразиться страничка.
Пока не нашел возможности реализации...
|
|
17.05.2011, 10:41
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
Что такое в данном случае превью? просто уменьшенная модель сайта или же картинка-скрин сайта?
Если второе, могу посоветовать один вариант создания динамических скриншотов сайта. Реализую его сейчас в своей трехмерной сферической системе навигации.
|
|
17.05.2011, 16:14
|
|
Модератор
|
|
Регистрация: 27.04.2010
Сообщений: 3,417
|
|
ArmagedDance,
после последнего предложения мне стало страшно.
|
|
17.05.2011, 22:56
|
Новичок на форуме
|
|
Регистрация: 15.05.2011
Сообщений: 2
|
|
Сообщение от ArmagedDance
|
Что такое в данном случае превью? просто уменьшенная модель сайта или же картинка-скрин сайта?
Если второе, могу посоветовать один вариант создания динамических скриншотов сайта. Реализую его сейчас в своей трехмерной сферической системе навигации.
|
Все верно - картинка-скрин сайта. Как это возможно реализовать?
|
|
21.05.2011, 11:08
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
C помощью библиотечки CURL (Php, не javascript) отправляешь свой сайт на специальный ресурс, который возвращает тебе в ответ скрин твоего сайта. Муторно, ресурсоемко, но красиво. Наверное.
<?php
// инициализация сеанса
$ch = curl_init();
// установка URL и других необходимых параметров
curl_setopt($ch, CURLOPT_URL, "http://www.browsrcamp.com/app/screenshots");
curl_setopt($ch, CURLOPT_HEADER, true);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
# POST /forum/..
curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/5.0 ()");
# User-Agent
$headers = array
(
'Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*;q=0.8',
'Accept-Language: ru,en-us;q=0.7,en;q=0.3',
'Accept-Encoding: deflate',
'Accept-Charset: windows-1251,utf-8;q=0.7,*;q=0.7'
);
curl_setopt($ch, CURLOPT_HTTPHEADER,$headers);
# добавляем заголовков к нашему запросу.
curl_setopt($ch, CURLOPT_POSTFIELDS, 'action=/app/screenshots&_method=POST&data[Screenshot][url]=http://твой_сайт');
// загрузка страницы и выдача её браузеру
$page=curl_exec($ch);
// завершение сеанса и освобождение ресурсов
curl_close($ch);
$url=substr($page, strripos(substr($page, 0, stripos($page, 'thumb')), 'http'),
stripos($page, 'thumb')-strripos(substr($page, 0, stripos($page, 'thumb')), 'http')+9);
echo "<img width=100px src=".$url.">";
?>
Как видно, скрипт возвращает тег <img width=100px src=".$url."> с уже готовой картинкой.
В нужном месте вставляешь скрин твоего сайта с нужным разрешением на сайте. Можно также подключить библиотеку GD, которая будет делать тебе красивый ресайз превью, поскольку, как известно, в IE ресайз осуществляется через задницу и поэтому расплывчато.
Последний раз редактировалось ArmagedDance, 21.05.2011 в 11:13.
|
|
21.05.2011, 14:30
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
Сообщение от ArmagedDance
|
Реализую его сейчас в своей трехмерной сферической системе навигации
|
ого.. оч. интересно. а можно посмотреть?
|
|
21.05.2011, 15:17
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
Пока не на что смотреть. Система в процессе разработки.
В общем-то, механизм не сложен.
Php скрипт запрашивает в определенной папке на сервере сайта скрины сайта для модуля навигации и если их не находит, соединяется с вышеуказанным сервером, где их генерирует, копирует в папку сервера сайта и потом уже выдает. Собственно, скриншот в формате gif весит 50-60 кб так что траффик это сильно не грузит.
Далее, модуль навигации собой представляет спижженый отсюда http://www.devirtuoso.com/Examples/3...ne/sphere.html
javascript, где плюсики заменены на скрины сайта чуть большего размера. И вуаля, мы словно работаем в неком кибернетическом пространстве, наблюдая сайт в трехмерной проекции.
Собственно, сейчас потихоньку разрабатываю следующее:
Возможность реалистичного вращения мышкой сферы при нажатии и удеживании мыши на ней.
Пока скрины вращаются всегда фронтально - параллельно плоскости экрана, я же хочу сделать, чтобы они вращались вокруг некоего центра сферы, чтобы придать большей реалистичности.
Последовательный постепенный наезд скриншота до 100% экрана при клике и плавное замещение его html-документом сайта.
Оптимизация с целью снижения расходов процессора, пока весь модуль жрет почти 30-50% мощности двухядерного процессора в браузерах Opera и IE. При количестве ссылок 15 шт.
Последний раз редактировалось ArmagedDance, 21.05.2011 в 15:23.
|
|
23.05.2011, 13:50
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
Сообщение от ArmagedDance
|
...При количестве ссылок 15 шт.
|
все мы ходим одинаковыми путями..
Сразу хочу сказать: плюньте на эту затею, чтобы не убить пол-года жизни, как это сделал я. Вы не получите на javascript приемлемой скорости и достойного эффекта. Почему? -Потому что javascript - это интерпретатор, а не компилятор.
Я занимался похожей задачей. Всего было сделано 100000 скриншотов сайтов шириной по 100 и 640px. Как отображать? Из рассмотренных вариантов (в том числе и типа "3D") наиболее работоспособным оказался вариант в виде пирамиды с отображением сайтов в соответствии с неким рейтингом... с динамической подгрузкой с помощью аджакс...
Впоследствии работы были приостановлены.
Полноценно реализовать данную идею на мой взгляд можно сейчас только с помощью либо Adobe Flashe Player, см. отличный пример здесь: http://www.cooliris.com/desktop/
либо (на перспективу) с использованием Canvas HTML5.
Если Вы всё еще будете продолжать развивать данное направление, то можем посотрудничать; есть вопросы:
-как часто планируется обновление скриншотов сайтов? (люди хотят видеть картинку превью, совпадающую с изображением реального сайта с разницей не более чем на 1 сутки).
-возможно ли взаимодействие с Вашим ресурсом (хранилищем превьюх) в стиле WEB 2.0 ?
-где планируется размещать сервер? (мне необходима его связь с зоной UA-IX - это Украина).
P.S. Приношу извинения автору топика за некоторое захламление его темы.
|
|
23.05.2011, 14:35
|
Кандидат Javascript-наук
|
|
Регистрация: 07.12.2009
Сообщений: 147
|
|
Маэстро, видимо, я не совсем уникален со своей идеей отрехмеризировать сайт )
если честно, я на распутьи нахожусь в данный момент. С одной стороны, реализация оказалась весьма сложной, более того, в точности реализовать то, что сидит у меня в голове, на одном лишь javascript невозможно, как вы заметили выше, из-за медленности и ресурсоемкости работы интерпретируемого javascript. Уверен, со старыми версиями браузеров, например, ниже IE 6 возникнут непреодолимые проблемы. С другой стороны, довольно большой процент людей, которые не любят все эти красивости, трехмерности и анимации на сайтах, так как приходят туда только за информацией, а если нечто вращаясь в трехмерном пространстве грузит им процессор на 50% и не дай бог браузер зависнет секунд на 10-15%, то велика вероятность, что такой юзер больше вообще никогда не зайдет на сайт. И я его смогу понять. так что пока я в сомнениях - продолжать ли работу на javascript или отложить идею проекта до момента освоения Flash
|
|
23.05.2011, 15:04
|
Профессор
|
|
Регистрация: 02.07.2010
Сообщений: 642
|
|
Совершенно верно, все "красивости" (анимация и "3D") должны быть легким дополнением к информационному функционалу сайта, а не быть его главным стержнем и главной идеей. Исключение составляют сайты, являющиеся "подарочными", либо выражающими лицо конкретного человека. Даю идею, чтобы Ваша работа не погибла окончательно: предложите свой механизм для создания типа новогодней индивидуальной поздравительной открытки. В Вашей "сфере" будут крутиться новогодние подарки, которые пользователь выбирает (настраивает) сам. Либо для создания персональной коллекции фотографий, которые будут вот так крутиться. Но их должно быть 10-20, а не 1000.
Что касается идеи отображения превью сайтов, то какова всё же была главная (информационная) цель? (если не секрет) Будет ли Ваш сайт привлекателен в принципе без "трехмерной сферической системы навигации"?
|
|
|
|