Разширяване функционалността на Test Studio

Съвсем наскоро работих върху една сравнително проста имплементация за разширяване функционалността на Test Studio. Идеята беше след изпълняването на определен лист от UI тестове да се изпраща email до списък от хора, който да съдържа в себе си резюмирана информация относно крайния резултат и по-подробна такава, ако съществуват провалили се тестове.

Test Studio logoСлед гореспоменатата реализация, успях да напиша една публикация, която с помощта на Jim Holmes намери място в официалния блог на продукта.
Може да я прочетете на английски език тук:
Extending Test Studio in the Real World

Надявам се, че ще ви бъда интересна и от полза в случаите, когато работите върху вашите проекти и тяхното обогатяване.

Харесва ли ви това? Споделете:

Запознайте се със Sitefinity Lightning

В тази публикация ще ви представя един нов и изключително интересен продукт от семейството на CMS системата Sitefinity, а именно десктоп редактора Lightning.

Sitefinity Lightning

Какво представлява Lightning?

Ако сте блогър или ви се налага често да редактирате каквото и да било съдържание в Интернет, навярно сте срещнали неудобства при използването на браузър и уеб ориентиран редактор. Тук се намесва Lightning – десктоп клиент с интуитивен и приятен интерфейс за публикуване и редактиране на уеб съдържание.

Какво ви позволява клиента?

Ако сте работили със системата за управление на съдържанието – Sitefinity, ще сте запознати с възможностите, които ви позволява тя. Накратко, Lightning се свързва с вашия сайт, позволявайки ви да създавате, публикувате и редактирате лесно от вашия десктоп новини, блогове и блог публикации, както и custom съдържание по ваш избор (например модули за рецепти, вицове, често задавани въпроси и др.). Клиентът ви показва и валидира всички задължителни или не полета свързани с тези типове (числа, дати, категории, тагове, картинки и други).

Последната версия на клиента към момента (Sitefinity Lightning Beta) предлага:

  • Красив и удобен интерфейс
  • Лесна и бърза инсталация в няколко стъпки
  • Автоматични update-и, както и възможност за rollback до предишна версия
  • Работа както онлайн, така и в офлайн режим, позволяващ редакция и запаметяване на чернови
  • Качване на картинки, drag & drop функционалност, както и използване на вече съществуващи картинки от Sitefinity
  • Създаване на категории, тагове и custom класификатори директно от клиента
  • Управление на статични и динамични модули
  • Управление на много сайтове едновременно
  • Работа със Sitefinity 5.2 SP1 и 5.3 сайтове

Как мога да изпробвам Lightning?

Lightning е достъпен за свободно сваляне от официалната му страница. За да го ползвате успешно ще ви е нужно да преминете през следните стъпки:

  1.  Свалете и инсталирайте Sitefinity оттук. (предлага се 30-дневен пробен период)
  2. След успешната инсталация на Sitefinity, свалете от страницата на Lightning клиента и архива със сървърния модул. В компресирания файл ще откриете документ с подробна информация относно начина, по който да свържете клиента със сайта си.
  3. Инсталирайте клиента и изчакайте автоматичното му зареждане след нея.
  4. Въведете данните на Sitefinity сайта, който сте създали.
  5. Вече можете да разгледате и изпробвате чудесните възможности на продукта.

Демо

Подготвил съм кратка демонстрация на Lightning, с която се надявам лесно да придобиете представа за това, което представлява продукта и начина, по който работи. Видеото ще откриете отдолу.
За да го гледате ще ви е нужен инсталиран Adobe Flash Player.

Надявам се това кратко представяне на този удобен и приятен за употреба клиент да ви е харесало и заинтригувало. Вярвам, че Lightning ще е интересен и желан инструмент за всички занимаващи се с публикуване и редактиране на уеб съдържание. Приятно писане! : )

Харесва ли ви това? Споделете:

Една седмица до DevReach 2012

Остава по-малко от седмица до едно от най-очакваните събития в IT света за тази година, а именно DevReach 2012.

DevReach 2012

Какво е DevReach?

DevReach е най-голямата конференция по разработка на софтуер в Централна и Източна Европа, която за щастие на всички нас може да се посети на територията на България. Вратите й са отворени към всички разработчици и хора с интерес в сферата на .NET, уеб и мобилните технологии.

Къде и как ще се проведе?

DevReach 2012 ще се проведе на 4-ти и 5-ти Октовмри 2012 г. в кино “Арена” Младост, София. На събитието ще присъстват близо 40 световноизвестни лектори, както и посетители от цял свят. В тези два дни ще се проследят всички нови тенденции в разработката и тестването на софтуер, както и новостите около различните съвременни архитектури и платформи.

Защо си заслужава да посетим DevReach 2012?

Конференцията е уникално само по себе си събитие. То дава възможност за среща с водещи разработчици на софтуер, които споделят много от своя практически опит и дават безценни съвети с цел по-добра професионална работа и успеваемост.  Запознаствата с IT специалисти от различни държави допринася за обмяната на опит, натрупването на контакти, както и отваряне на нови кариерни възможности.

Как да се регистрирам за събитието?

За да получите повече информация относно събитието и за да се запишете за конференцията, посетете официалния сайт. Там ще откриете цените на различните пропуски, възможностите за отстъпка, програмата за двата дни и други интересни неща.

Надявам се да се видим след седмица на DevReach 2012 : )

Харесва ли ви това? Споделете:

Новата студентска система на Телерик е вече факт

За мен е изключително удоволствие да ви привествам с новото попълнение към огромното семейство от инициативи на Телерик Академия, а именно студентската система Telerik Academy Students.

От днес (10 Август 2012 г.) тя е достъпна на адрес http://telerikacademy.com

telerik academy students screenshot

Какво представлява системата?

Както ще откриете и в About страницата на проекта, Telerik Integrated Learning System е студентска система разработена за целите на обученията в академията на Телерик.

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

Към датата на нейното откриване, системата предлага следните възможности:

  • регистрация на потребители както локално, така и чрез Facebook профил
  • кандидатстване за Академията – сезон 2012 / 2013
  • достъп до информация за различните курсове, най-новите блог постове и форумни дискусии

Екипът

По проекта Telerik Integrated Learning System взеха участие огромна част от курсистите в академията през сезон 2011 / 2012, в това число и аз.
За написването му помогнаха много и се включиха също някои от трейнърите в академията. Към задачата се подходи изключително сериозно. Цялата работа бе разделена на екипи, които преминаха през три основни етапа – създаване на прототип и концепции за отделните модули, разработка и тестване на цялостната система.

Бъдещето

Занапред се очакват да бъдат разработени, довършени и пуснати публично редица споменати вече и нови функционалности на системата. Това е проект, по който се работи усърдно и чиято цел е да се превърне в социална мрежа на всички участници свързани с обученията в Телерик.
Едно е сигурно и това е, че предстоят много интересни и интерактивни моменти около начинанието Telerik Academy Students.

Бъдете готови за more than expected.

Харесва ли ви това? Споделете:

Как да си направим ротатор на картинки с JavaScript

Съвсем наскоро, във връзка с един от курсовете, които посещавам в момента, ми се наложи да правя статичен уебсайт по даден дизайн. В даденото psd беше предвидено да има нещо като панел, в който се сменят различни публикации (новини с картинки и допълнителна информация) като функционалността изискваше както автоматично сменяне, така и ръчно чрез бутони напред / назад. Под въпросния панел има и част с т. нар. thumbnails, които представляват малък размер на това, което се изобразява горе. Ако се click-не на тях, автоматично картинката горе се сменя с текущата посочена. Цялото това нещо е подобно на widget и е по-известно като image rotator.
Подобни ротатори на картинки (и не само картинки, а цели панели с информация) може да откриете на сайтове като Yahoo, playlist-а на YouTube и още куп други.

В настоящият урок ще ви покажа как сами да си направите нещо подобно:

Демонстрация

Какво ще ни е нужно за целта?

  • Познания по HTML, CSS, JavaScript  (+ библиотеката jQuery).
  • Сорс код редактор, за демото съм ползвал Notepad++.
  • Някакъв опростен редактор за картинки, може да се ползва и Paint.
    Ще ви трябва за оразмеряване на картинките и crop-ване на малките thumbnails по-късно.
  • Малко свободно време, желание и готини идеи.

Какво точно ще направим и как ще изглежда?

За демонстрацията реших да направя съвсем семпъл вариант на image rotator. Вие сами може да експериментирате, да направите коренно различни неща, по-богати на съдържание, стил и функционалност. Няма да влизам в детайли относно html-а и стиловете използвани в моя вариант. Накратко имам контейнер, в който се съдържат ротатора и панелчето с малки картинки под него. Ротаторът има два бутона за навигация между картинките и средна част с големия формат на картинките (новината или статия с различно съдържание). Под тях има панелче, в което се визуализират малките картинки (thumbnails). Добавени са някои ефекти, като смяна на фона с бял при hover на мишката и оранжев при показване на текущата картинка. Накрая на тази публикация ще откриете link към целия проект и сорс код, които съм ползвал и ще може да видите самата структура и стилизиране на елементите.

По какъв начин функционира въртенето и как да го направим?

Тук идва същинската част. За по-лесно ориентиране, докато четете, може да отворите script файла от този адрес и да следите кода заедно с обясненията.

Ще започнем с променливите. Нуждаем се от един предварително деклариран масив imageURLArray, в който да се съдържат имената на файловете с големи картинки, включително разширението им. Пътят до тях няма да се специфицира тук. Останалите променливи са съответно imgHolder, която по-късно при зареждането на страницата ще открие елемента, чиято фонова картинка ще променяме, nextPictureToShow – индекс на следващата картинка за показване, refreshedIntervalId – ще я ползваме, за да стопираме и подновяваме автоматичното въртене и smallContainers, в която ще се съдържат всички елементи с малки картинки от крайния долен панел.

В моментът, в който страницата е заредена ($(document).ready(function() { … }) и всички елементи на нейното DOM дърво са правилно възприети и конструирани,
променливите ще бъдат инициализирани. Ще открием всички div-чета с клас SmallPic, който държат thumbnail-овете на големите картинки. В imgHolder ще запишем и елемента, който държи за фон главната голяма картинка на rotator-а.
Даваме начална стойност на индексатора 0 и продължаваме напред. За всеки от div-овете с малки картинки присвояваме следните event-и:
mouseover – когато курсора на мишката е над съответния елемент, към него ще се добавя клас .HoveredPic, който ще сменя фона на контейнера с бял и ще слага познатата ръчичка за курсор.
mouseout – просто ще премахва гореспоменатия клас, връщайки стиловете, както са били преди това.
click – ще извика функцията ChangeRotatorPic с параметър index сочещ към текущо извикания обект.

Ще обясня отделните методи малко по-надолу, но първо да приключим с първоначалните инициализации и извиквания при зареждане на страницата.
Останалото от тази част е закачането на event-а click за бутона наляво със съответното извикване на метода PreviousPicture() и този за надясно NextPicture().
За финал, викаме методът StartRotator(), който пуска автоматичното въртене на картинките.

ОТДЕЛНИТЕ МЕТОДИ

function StartRotator()
{
refreshedIntervalId = window.setInterval(“RotateImages()”, 3500);
}

Накратко, задавайки тази стойност на променливата, чрез методът setInterval ние заявяваме, че на всеки 3,5 секунди ще бъде извиквана функцията RotateImages().
Със съдържащите се в RotateImages() условия, въртенето ще продължава безкрайно. По-късно ще разберем как да го спрем и в кои случаи ще е нужно.
Повече за метода setInterval – тук и тук.

RotateImages()

В този основен метод правим няколко стъпки. Чрез eval() се изпълняват различни statement-и или се изчисляват изрази. Върнатите обекти могат да се ползват по-напред в работата с различни методи на чистия JavaScript или библиотеката към него jQuery. Правим проверка дали не излизаме от размера на масива с картинките. Ако това е така, връщаме стойността на nextPictureToShow на 0 (по този начин осигуряваме преминаването от последна към първа картинка). Със следващия ред
var urlToImg = “url(img/” + array[nextPictureToShow] + “)”;
създаваме променливата, която ще ползваме като стойност на свойството background на елемента, който държи главната картинка. Библиотеката jQuery предоставя изключително удобни методи за директен достъп до елемента и неговите свойства. В този случай ще работим директно върху стиловете му чрез .css(), който приема като параметрите property и value. Нагласяме някои други свойства на фоновото изображение. Премахваме предишно добавения клас .ClickedPic, а после го добавяме само за текущия елемент.
$(“.SmallPic”).eq(nextPictureToShow) обхожда всички елементи с клас .SmallPic, но връща онзи от колекцията, което е с индекс nextPictureToShow.
В jQuery, разликата между .eq(n) и .nth-child(n) е в това, че при eq n е 0-базирано, а при nth-child броенето започва от 1.
Голямата ни картинка е вече сменена, както и фона на малката, която й отговаря и стои под нея. Увеличаваме nextPictureToShow с 1 за следващата итерация.

PreviousPicture()

Този метод се вика при натискане бутона наляво за ръчна смяна на картинката (спомняте си event-а, който закачихме по-нагоре, нали?!). По-особеното е if-else частта. Ако nextPictureToShow е 0 или 1, то ние сме все още на първата картинка. Или сме заредили страницата и веднага сме натиснали назад, стойността е още 0 и не е увеличена, или RotateImages() е минало вече веднъж и стойността е 1. И в двата случая, трябва да зададем стойност на променливата равна на последния валиден индекс от масива с картинки. Така, когато сме на първата картинка и дадем назад или наляво, ще ни бъде показана последната, което е очакваното преминаване.

В противен случай, намаляме стойността на променливата за индекса с 2.
Тук идва важния момент с изпълнението на clearInterval(refreshedIntervalId);
По този начин “нулираме” таймера и прекратяваме изпълнението на RotateImages() на всеки 3 секунди и половина. Извикваме RotateImages(), за да изпълни смяната и след това стартираме отново автоматичното сменяне чрез StartRotator().

NextPicture()

работи по общо взето същия начин като предния метод. Разликата е единствено в проверката. Ако натиснем веднага след зареждане на страницата бутона за следваща снимка, може да сме изпреварили събитията с инкрементацията и смяната да зацикли. Затова, ако е 0, увеличаваме с 1, за да е всичко ОК.

ChangeRotatorPic(itemNumber)

Това е закачения за event-a click метод. Присвояваме на nextPictureToShow стойността на itemNumber, зачистваме таймера, викаме RotateImages() и накрая стартираме отново автоматичния ротатор.

Да не повярва човек, но това е всичко!

“Омръзна ми да чета, не разбрах нищо и искам код … “

Ако сте scroll-нали дотук в гнева си (ако вече не сте натиснали X-а на браузъра), ще ви разбера. Всички сме изпадали в това положение, когато думите просто не са достатъчни. Затова, ще си спазя обещанието като ви дам адрес към архивче с целия проект и всички файлове към него.

Целият сорс код и файловете към проекта

 

С този урок се опитах да ви покажа един от начините да си направим по сравнително лесен и бърз начин image rotator с възможност за автоматично и ръчно сменяне на съдържанието. Надявам се тези знания да ви послужат като основа за създаването на нещо далеч по-функционално, красиво и приложимо в бъдещите проекти, по които ще работите. Желая ви успех! : )

Харесва ли ви това? Споделете: