Превью сайта
Добрый день. Стал вопрос реализовать превью сайта по указанной ссылке, возможно ли на javascript такое?
Выглядит примерно таким образом. Пользователь вставляет ссылку на сайт. В превью должна отобразиться страничка. Пока не нашел возможности реализации... |
Что такое в данном случае превью? просто уменьшенная модель сайта или же картинка-скрин сайта?
Если второе, могу посоветовать один вариант создания динамических скриншотов сайта. Реализую его сейчас в своей трехмерной сферической системе навигации. |
ArmagedDance,
после последнего предложения мне стало страшно. |
Цитата:
|
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 ресайз осуществляется через задницу и поэтому расплывчато. |
Цитата:
|
Пока не на что смотреть. Система в процессе разработки. :)
В общем-то, механизм не сложен. Php скрипт запрашивает в определенной папке на сервере сайта скрины сайта для модуля навигации и если их не находит, соединяется с вышеуказанным сервером, где их генерирует, копирует в папку сервера сайта и потом уже выдает. Собственно, скриншот в формате gif весит 50-60 кб так что траффик это сильно не грузит. Далее, модуль навигации собой представляет спижженый отсюда http://www.devirtuoso.com/Examples/3...ne/sphere.html javascript, где плюсики заменены на скрины сайта чуть большего размера. И вуаля, мы словно работаем в неком кибернетическом пространстве, наблюдая сайт в трехмерной проекции. Собственно, сейчас потихоньку разрабатываю следующее: Возможность реалистичного вращения мышкой сферы при нажатии и удеживании мыши на ней. Пока скрины вращаются всегда фронтально - параллельно плоскости экрана, я же хочу сделать, чтобы они вращались вокруг некоего центра сферы, чтобы придать большей реалистичности. Последовательный постепенный наезд скриншота до 100% экрана при клике и плавное замещение его html-документом сайта. Оптимизация с целью снижения расходов процессора, пока весь модуль жрет почти 30-50% мощности двухядерного процессора в браузерах Opera и IE. При количестве ссылок 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. Приношу извинения автору топика за некоторое захламление его темы. |
Маэстро, видимо, я не совсем уникален со своей идеей отрехмеризировать сайт :))
если честно, я на распутьи нахожусь в данный момент. С одной стороны, реализация оказалась весьма сложной, более того, в точности реализовать то, что сидит у меня в голове, на одном лишь javascript невозможно, как вы заметили выше, из-за медленности и ресурсоемкости работы интерпретируемого javascript. Уверен, со старыми версиями браузеров, например, ниже IE 6 возникнут непреодолимые проблемы. С другой стороны, довольно большой процент людей, которые не любят все эти красивости, трехмерности и анимации на сайтах, так как приходят туда только за информацией, а если нечто вращаясь в трехмерном пространстве грузит им процессор на 50% и не дай бог браузер зависнет секунд на 10-15%, то велика вероятность, что такой юзер больше вообще никогда не зайдет на сайт. И я его смогу понять. так что пока я в сомнениях - продолжать ли работу на javascript или отложить идею проекта до момента освоения Flash :) |
Совершенно верно, все "красивости" (анимация и "3D") должны быть легким дополнением к информационному функционалу сайта, а не быть его главным стержнем и главной идеей. Исключение составляют сайты, являющиеся "подарочными", либо выражающими лицо конкретного человека. Даю идею, чтобы Ваша работа не погибла окончательно: предложите свой механизм для создания типа новогодней индивидуальной поздравительной открытки. В Вашей "сфере" будут крутиться новогодние подарки, которые пользователь выбирает (настраивает) сам. Либо для создания персональной коллекции фотографий, которые будут вот так крутиться. Но их должно быть 10-20, а не 1000.
Что касается идеи отображения превью сайтов, то какова всё же была главная (информационная) цель? (если не секрет) Будет ли Ваш сайт привлекателен в принципе без "трехмерной сферической системы навигации"? |
Часовой пояс GMT +3, время: 04:09. |