Рубрики
Мысли Программирование

Быстрый переход наверх страницы, как вконтакте

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

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

Ссылка на демо (откроется в новом окне)

Не представляю, как я жил без этой кнопки раньше, если её нет на сайте, а прокрутка большая, то меня ломает:)

Вот как это выглядит (для тех, кто ещё не видел демо):

Нажатием на серую область слева, браузер «отскролит» нас наверх.

Инструменты: html, javascript, jquery.

Алгоритм:
1. Берем нужный шаблон джумлы, вордпресса или страницу сайта
2. Добавляем на страницу область-кнопку

Здесь надо оговориться, что показывается размещение кнопки только для вёрстки, где есть свободное место слева, не менее 30 пикселей, чтобы пользователь мог по нему попасть. Это остаётся на ваше усмотрение.

Я добавил div перед закрывающим тегом элемента wrap (на моей странице wrap имеет фиксированную ширину и выровнен посередине).

<div id="up-button" >
	<div>Наверх<div>
<div>

И стили для области перехода (пояснения в комментариях):

<style type="text/css">
/*Left fast top scroll*/
#up-button
{
/*
позиция элемента - фиксированная на странице, в левом верхнем углу;
так же задаём 100% высоту и получаем область на всю 
левую часть экрана шириной 100px
*/
position: fixed; 
top: 0; 
left: 0; 
width:100px; 
height:100%; 
background: #D1D1D1; 
display: none;/*скрываем область по умолчанию*/
}

#up-button div
{
/*элемент с подписью названия области*/
font-weight: bold;
font-size: 14px;
width:50px;
margin: 5px auto;
color: #636363;
}
</style>

3. Добавляем на страницу javascript для своевременного отображения области и реакции на клик

<script type="text/javascript">
//высота в пикселях, при прокрутке на которую, появится область для быстрого возврата слева
var scrollButtonLimit = 300;

//фукнция для инициализации решения
function InitScrollNavigation() {
	//применён jQuery
	//получаем область быстрого возврата наверх (div) в переменную
	var upButton = $("#up-button");

	//навешиваем реакцию на каждое событие скрола от пользователя
	$(window).scroll(function (e) {
		var scrollTop = $(window).scrollTop();//получаем значение прокрутки
		if (scrollTop > scrollButtonLimit) {//значение больше заданной константы - показываем кнопку
		  $(upButton).show();
		  return;
		}
		if (scrollTop <= scrollButtonLimit) {//значение меньше заданной константы - скрываем кнопку
		  $(upButton).hide();
		  return;
		}
	});
	
	//навершиваем реакцию на событие при клике на область, скролим пользователя наверх 
	$(upButton).click(function (e) {
		$(window).scrollTop(0);
	});
}

$(document).ready(function() {
	//навешиваем обработчики при загрузке страницы
	InitScrollNavigation();	
});
</script>

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

Возможно, кому-то достаточно и этого для покрытия задач.

Но мы всё равно переходим к созданию меню:)

4. Помечаем нужные «якори» — теги <a name=»your-anchor-name»>your-element-name</a>, на которые мы хотим переходить на странице.

Ключевым для нас является атрибут name, о нём ещё будет сказано дальше (он может реализовать стандартный механизм переходов html).

Например, такая вёрстка:

<p><strong><a name="brod-artisti">Бродячие артисты</a></strong></p>
<p style="color: #4E76C2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et metus ac arcu sollicitudin lacinia ac ac risus.
</p>
<p><strong><a name="veselo-tancuut">Весело танцуют</a></strong></p>
<p style="color: #C2544E;">
Aliquam tempor enim aliquet nisl ultrices pellentesque. Maecenas ultrices nulla et eros euismod pellentesque. Nam mattis mattis mi sit amet semper. Nam aliquam leo lacus. ...
</p>

4. Добавляем меню

<ul id="video-menu" >
	<li><a onclick="return ScrollToTarget(this);" href="#brod-artisti">Бродячие артисты</a></li>
	<li><a onclick="return ScrollToTarget(this);" href="#veselo-tancuut">Весело танцуют</a></li>
</ul>

Функцией ScrollToTarget по окончании действий возвращается значение false, что не даёт браузеру перейти по ссылке.

5. Добавляем реакцию по клику на пункт меню для перехода на конент

<script type="text/javascript">
//функция, которая будет вызываться при клике на ссылку в меню
function ScrollToTarget(element) {
	//получем ссылку, выбираем из неё всё, что после # - название элемента a, куда мы хотим перейти
	var elHref = $(element).attr('href');		
	var name = elHref.substring(elHref.lastIndexOf('#') + 1, elHref.length);

	//получаем позицию скрола элемента, на который должен быть осуществлён переход
	var targetTop = $("#video-content").find("a[name='" + name + "']").offset().top;

	//скролим пользователя на элемент (чуть выше элемента - для эргономики)
	$(window).scrollTop(targetTop - 5);
	
	return false;
}
</script>

Меню готово! Щёлкаем на одном из пунктов — переходим на него на странице.

Возвращаясь к тегу <a/> с атрибутом name, этот атрибут позволяем делать ссылки внутри страницы (якори) на нужные элементы. Если убрать из тега меню <a onclick=»return ScrollToTarget(this);» href=»#brod-artisti»>Текст ссылки</a> функцию на onclick, отработает стандартный механизм, который модифицирует ссылку (что нам не нужно); но механизм перехода наверх всё равно будет работать.

Спасибо за внимание!
Удачи и до новых встреч на просторах сети!

P.S. Надо добавить описанный скрол в блог:)

Рубрики
.NET Framework Программирование Стиль программирования

Подключить сервис сокращения ссылок bit.ly к ASP.NET сайту

Недавно столкнулся с интересной задачей, нужно было прикрутить короткие ссылки к ASP.NET сайту. Использовал один из самых известных сервисов коротких ссылок — bit.ly Документация к API на английском.

Как это работает: bit.ly создаёт короткую ссылку на нашу ссылку. Таким образом, идёт запрос к bit.ly, а bit.ly «перекидывает» пользователя на наш адрес.

Алгоритм такой:

1. Регаемся на bitly.com

2. Для запросов на короткие ссылки, нам понадобится авторизация, чтобы сервис мог вести квоты по запросам. Я использовал «api key», то есть передавал логин и ключ в get-запросе прямо в ссылке. Узнаём свой api key по адресу http://bitly.com/a/your_api_key.

3. Будем использовать ссылку /v3/shorten (описание). Теперь нам нужно всего лишь создать get-запрос (можно прямо через браузер) вида:

http://api-ssl.bitly.com/v3/shorten?format=xml&longUrl=_longurl_&login=_login_&apiKey=_apikey_

Здесь нужно подставить login — получен на шаге 1, apiKey — получен на шаге 2, longUrl — ссылка, которую хотим укоротить (начиная с http://).
Мы указали format=xml для получения результата в этом формате.

4. Проверили, всё работает через браузер. Теперь нужно создать программный запрос. Вот класс, в нём запрограммировано, как это сделать:

public static class BitlyApi
    {
        private const string HttpStatusOk = "200";
        private const string ApiSslUrl = "http://api-ssl.bitly.com/v3/shorten";
        private const string Login = "ваш_логин";
        private const string ApiKey = "ваш_ключ";

        public static string GetShortenedUrl(string longUrl)
        {
            string url = string.Format("{0}?format=xml&longUrl={1}&login={2}&apiKey={3}",
                                       ApiSslUrl, HttpUtility.UrlEncode(longUrl), Login, ApiKey);
            XDocument resultXml = XDocument.Load(url);

            if (resultXml.Descendants("status_code").FirstOrDefault().Value == HttpStatusOk)
            {
                XElement shortUrlElement = resultXml.Descendants("data").Elements("url").FirstOrDefault();
                if (shortUrlElement != null)
                {
                    //всё в порядке, возвращаем короткую ссылку
                    return shortUrlElement.Value;
                }
            }

            //что-то пошло не так - возвращаем, исходную длинную ссылку
            return longUrl;
        }
    }

Использован метода XDocument.Load(string url), который создаёт XDocument из полученного в ответе на запрос xml-файла. Проверяется пришедший в xml status_code и если всё нормально, идёт небольшой разбор, получение значения нужной ветки файла и возвращается коротка ссылка!

Рубрики
Программирование Стиль программирования

Моделирование случайных процессов

UPD: Краткое содержание:
Генерирование последовательности случайных величин по методам (теория для программирования):

Методы проверки гипотезы о распределении (теория для программирования):

Описание программы:

Привет! Первая статья. Постараюсь рассказать доступно, но рассчитываю на Ваши базовые знания области.

На четвертом курсе универа задали мне (и ещё двум ребятам) непростую для меня тему для курсовой работы: «Моделирование случайных процессов». Задача стояла в моделировании различных случайных процессов (последовательности случайных величин) с заданным законом распределения программно разными методами.

Решение было реализовано на я/п C# и технологии WinForms. Попутно была поставлена и успешно выполнена задача построения множества графиков с помощью библиотеки ZedGraph (реализация, гистограмма, функциональное распределение, корреляционная функция), производится проверка гипотезы о распределении.

Я расскажу что это за умные слова и как это запрограммировать, точнее дам код, в котором совсем несложно запрограммированы описанные ниже формулы. Основной целью статьи является донесение скромных знаний по теме моделирования случайных процессов на Вашем ЭВМ:)

Для тех, кому не терпится, вот исходники;)
Решение в MS Visual Studio 2010: Скачать ProcessModeling-vs2010 (7096)
Решение в MS Visual Studio 2008: Скачать ProcessModeling-vs2008 (1411)

Теория

Метод нелинейного преобразования

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

Имеем (генерируем) белый шум — последовательность случайных величин, «покрывающих» весь диапазон (у нас 0..1). Подвергаем наш белый шум нелинейным преобразованиям, по формуле

, где x-исходная случайная величина, y-полученная случайная величина.

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

Типовые законы распределения представлены в следующей таблице (таблица рисунком, иначе очень-очень сложно):

етод рекурсивной фильтрации

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

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

Вот как выглядит схема рекурсивного фильтра, приведу для ясности:

А вот формула, которую нужно запрограммировать:

В приведенной формуле a и b сидели на трубе параметры фильтра. Эти параметры, насколько я знаю, в основном рассчитываются методом билинейного преобразования стандартных аналоговых фильтров. Выглядит сложно, но спешу успокоить: для некоторых типовых моделей параметры уже рассчитаны (при везении можно найти и другие), они приведены в таблице ниже.

Практика

Расскажу об архитектуре решения (громкое слово!), а описание всех относящиеся к вводу/выводу методов MS .NET опустим — о них можно узнать из целевых источников.

Диаграмма классов

На следующем рисунке показана диаграмма классов (щелчок — открытие большого изображения в новой вкладке браузера):

Самый верхний класс иерархии — абстрактный класс SProcess. Он содержит основные свойства и методы, присущие любому случайному процессу в проекте. Его наследуют абстрактные классы ReverseMethodProcess — процесс, сгенерированный по методу нелинейного преобразования (обратной функции) и RecursiveFilterProcess — процесс, сгенерированный по методу рекурсивной фильтрации. Далее в иерархии идут в нижней строке рисунка, соответственно, классы процессов по законам распределения Симсона, равномерному, экспоненциальному, нормальному и классы процессов с колебательной и затухающей корреляционными функциями. Эти классы содержат методы для получения гистограмм распределения, функционального распределения и расчета параметров случайного процесса.

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

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

Оговорюсь, что писал программу давно. И сейчас, просматривая код, замечаю, что в ней есть милые программистские глупости, вроде public полей классов. Так что, доверяй, но проверяй:)

Заключение

Большое спасибо Прохорову Сергею Антоновичу за книгу Математическое описание и моделирование случайных процессов и студентам СГАУ (для меня они неизвестные герои), выпустившимся раньше меня, за не самую полную, но программу по представленной теме на Делфи.

Удачи в применении знаний и кода!

Исходники на C# .NET:

Решение в MS Visual Studio 2010: Скачать ProcessModeling-vs2010 (7096)
Решение в MS Visual Studio 2008: Скачать ProcessModeling-vs2008 (1411)