Author: admin

Changing your WordPress Language tutorial 100% working

Changing your WordPress Language tutorial 100% working

In this tutorial I will show you how to translate your WordPress site in different languages. Watch the video below for more information.

I have installed my WordPress blog site without any additional languages. The default language of my site is English United States.

Lets suggest that I want to translate my site to Bulgarian for example.

First of all go to  https://make.wordpress.org/polyglots/teams/ and download the WordPress installation files of language that you wish.

Now extract the archive files, then go to wp-content -> languages. This is the all language files needed to copy to your web site.

Now go to your website files and copy all files from language folder to your site. If you don’t have language folder in your wp-content folder then create one and then paste the downloaded language files there.

When the files are copied go to your admin panel -> settings ->general and from the dropdown menu named site languages choose the language that you want.

That’s it, if you have any questions please write a comment below.

The Long Dark Season One Wintermute

The Long Dark Season One Wintermute

After a long time waiting for the official release of my best survival game The Long Dark, the Season One Wintermute is finally here. Before the official release I passed all game’s Steam Achievements and all five challenges:

The game atmosphere combined with the beautiful soundtrack is incredible and the challenges are very interested. There is various difficult levels of challenges and I suggest you to start with Nomad. You can also just play to challenge yourself for how many days you can survive in this cold and quiet apocalypse. My record is more than 200 days :).

On August the 1st, Hinterland Studio launched version 1.0 named Season One Wintermute witch is story mode of the game. I played the game and survived for 5 days. The story begins in the ravine where I’m injected after plane crash. I recorded 2 videos with the first 5 days in the ravine where I have to search for food, water, I have to build a fire and I have to cure my wounds to survive. You can watch the videos below.

Изпитът за C# part 1

Изпитът за C# part 1

397360_10151199712614650_410378590_n

Днес беше важен ден, защото се явих на изпита за C# част 1 в Академия Телерик и адреналина беше на макс. Въоръжен с кафе, вода и черен шоколад  започнах да решавам задачите. Изпитът започна в 10,15ч и продължи 6 часа, в които дори не ползвах двете си почивки, но не стигнах за всички задачи. От 5 задачи успях да реша 3, за 4 -тата  ми трябваха само още 5 мин, за да хвана точки и от нея, но уви не ми стигна времето. Все пак  вкъщи драснах два реда и нещата тръгнаха. ..

Решените задачи можете да видите на следните линкове:

Triple Rotation Of Digits

UK flag

Poker hand

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

Проектите за JavaScript курса пристигнаха

Проектите за JavaScript курса пристигнаха

js

Дядо Коледа ни навести и от чувала си извади дългоочакваните проекти от курса по “Уеб дизайн с HTML 5, CSS 3 и JavaScript”, стартирал  през месец март. На мен се падна проекта Video store.

Системата “Video Store” за разглеждане  на видеотеки и филмите в тях работи в режим клиент-сървър. Клиентите (уеб браузъри) комуни­кират със системата сървъра (не директно) чрез изпращане на REST заявки с JSON-сериализирани данни.

Срокът за предаване е 31.01.13 и ще дам всичко от себе си, за да се представя достатъчно добре и да се класирам сред първите, както в първата част на курса.

Mouse event бутон в canvas.

Mouse event бутон в canvas.

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

click on canvas to view coordinates

а css кода ще запишем

 

Този код представлява два дива центрирани в браузъра спрямо резолюцията и канваса. В канваса ще изчертаем следната картинка

button

Сега е време да започнем с JavaScript кода.

1. Първо ще направим няколко променливи които ще ни трябват

2. Ще направим клас който ще взима координатите на нашия бутон – X left, X right, y Top и y Bottom. За да ги намерим можем да ползваме photoshop и да извадим 4 гайда и да намерим тези позиции. На картинката по долу се вижда какви са текущите X left, X right, y Top и y Bottom на бутона.

fotoshop

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

Класа Button има и един метод, който да проверява координатите къде е кликнато и ако е в полето на координатите на бутона да връща true.

3. Ще направим една функция която да чертае нашата картинка в канваса.

В предишния урок съм обяснил подробно как работи drawImage. Можете да го прочетете от тук

4. Следва да направим една функция, която да връща текущите ни координати на канваса независимо от резолюцията на екрана.

В случайя obj.offsetLeft ни връща текущата позиция на елемента спрямо неговия родител. Затова трябва да ползваме такава функция с цикъл който да събира в curleft и curtop офсета на всички родители на канваса.

5. Почти накрая остана да направим mouse event – а, който да проверява клика ни върху канваса на какви X и Y координати се намират

canvasPosition ще направи инстанция към функцията findPos, която ще ни върне масив с позициите. След това ще кажем, че mouseX e равно на кликнатото място в канваса минус offsetLeft на канваса. Същото важи и да mouseY. Така ще получим точните координати за да можем после да проверим метода на класа Button дали ще ни върне true и ако е така значи сме кликнали в координатите на бутона.

5. Сега остава само да сложим два addEventListener – а за да изчертаем първоначално картинката в канваса и за кликването с мишката върху канваса

Демо на урока можете да видите тук

Game Asteroid armagedon

Game Asteroid armagedon

asteroid_armagedon_big

Няма какво да се лъжем. Имам голямо влечение към игрите, а в момента особено към игри писани с HTML5. Напоследък доста се упражнявам точно в Game програмирането и най-накрая взе, че излезе нещо. Развих JavaScrip OOP до такова ниво, че да мога да направя обекти за всяка една част от сцената с, която трябва да се случи нещо. Може би претрупах малко нивата, защото бързах да я пусна, но за следващата игра ще отделя повече време и ще изпипам нещата още по добре. В крайна сметка направих 10 нива после се превърта. Астероидите са рандом идващи. Има и бонусчета за скорост на самолета, едно оръжие, точки, безсмъртие и живот. Ами това е накратко  надявам се да ви хареса 🙂

Пуснете играта от тук 

Как да направим движеща се background картинка в canvas?

Как да направим движеща се background картинка в canvas?

В този кратък урок ще ви покажа как да раздвижите картинка, която ползвате за заден фон в canvas и така да създадете усещане за движение. За този случай, аз ще ползвам следната картинка с размери 1920×350

tut1

Canvas елемента ще ми бъде с размери 650х350.

1. В HTML файла напишете canvas – а

2. Във вашия JavaScript файл направете променлива, която да вземе id-то на canvas – а и създайте обект за картинката, която ще ползвате. Задайте и пътя до картинката.

3. Следва да си направим една променлива, която да отговаря за нашите фреймове в анимациите.

window.requestAnimationFrame ще възпроизведе възможно най-плавната анимация за секунда време. Поддържа от повечето нови браузъри, но за всеки случай напишете за всеки браузър prefix – а.В случай, че някой браузър въобще не поддържа requestAnimationFrame, тогава анимацията ще се изпълни със setTimeout и 60 фрейма в секунда.

4. Следва да направим един клас, който да чертае картинката. Той ще има пропъртита за картинката като позиции в канваса и размери. Също така ще ни е нужен и един метод за изчертаването на картинката в канваса.

5. След това ще създадем 2 обекта, които ще са инстанция на класа LeyarBackground и ще ги позиционираме един след друг по дължина.

Може да ви се сторят малко объркващи всичките тези числа, но един път като схванете кое какво прави лесно ще се ориентирате.

Ето, всъщност накратко кое какво прави

За по-подробна информация прочетете тук – http://docs.webplatform.org/wiki/concepts/programming/drawing_images_onto_canvas

6. Сега ни трябват вече няколко функции, с които да задвижим всичко това

Ще обясня от долу на горе. Най-напред ще сложим един addEventListener на window обекта, с който да задвижим нещата и да почнем да изпълняваме функцията loop, която ще върти нашата анимация като се извиква непрекъснато с requestAnimFrame.
Преди всеки следващ фрейм трябва да чистим сцената, за да се показват единствено новите позиции на обектите.
Ако не ги чистим с всяка една нова итерация ще виждаме всичко, което е изчертано от предишния фрейм. За да направим това ни трябва следния код.

0, 0 са x и y координатите от къде да започва изчистването, 650 и 350 са width и height колко да е изчисти на сцената. в случая искаме цялата сцена.

След това идва частта, в която искаме да движим двата background обекта с функцията moveBackgound.
След като имаме следните стартови позиции на leyar_1Backgound1(dx = 0) и leyar_1Backgound2(dx = 1920) се получава следното. Двата се движат еднакво наляво със скорост 1px

и тук вече имаме 2 условия, в които казваме, че ако leyar_1Backgound1.dx стигне -1920 тръгвайки от 0 то нека се върне на dx позицията, която беше стартова за втория background която е 1920. И след това понеже вървят един след друг втория background ще стигне и той – 1920px и тогава и той да се върне на изходна позиция 1920.

И накрая викаме метода draw на класа LeyarBackground, за да изчертаем картинките.

По този начин можете да повтаряте движението постоянно и да създаде усещане за движение.

Демо на урока можете да видите тук

Участие в конкурса PC Magazine 12.2012

Участие в конкурса PC Magazine 12.2012

game_of_trolls_big

Завърши първият кръг на конкурса, организиран от Телерик и PC Magazine. Участвам отборно с колегата Николай Спасов, с който направихме заданието, но за съжаление не успяхме да вземем много точки от първия кръг, тъй като алгоритъмът ни не беше много добър, както и  заради други пропуски. Участието ни е много полезно, защото ни показва над кои неща да работим повече и на какво да наблегнем.

Можете да видите решението ни на задачата от тук

Затова за втората задача ще се постараем да направим нещо, което да ни донесе повече точки и полезен опит.

Сертификат от Microsoft

Сертификат от Microsoft

424820_531532306858901_253957152_n 403141_531532313525567_248573087_n

Вълнувам се, защото днес взех първия си сертификат от Microsoft за HTML 5 Application Development Fundamentals(MTA). Беше си предизвикателство за мен и се радвам, че успях да го преборя. Мога да кажа, че подготовката ми в Telerik academy се оказва добра, защото взимането на външни изпити ми се струва по-лесно. Без да губя време се записах на друг изпит отново от Microsoft, който предстой на 18.01.12 и очаквам да стискате палци :P.

Сертификата можете да видите тук

Skill meter system beta 0.1

Skill meter system beta 0.1

С радост искам да ви представя първата завършена beta версия на Skill meter – системата, която имах като идея да направя. Ето и по-важното около него.

Skill meter е система написана с HTML5, CSS3, PHP и Mysql за измерване на вашите умения в различни области, които сте придобили  в професионален или личен план. Чрез административния панел лесно и бързо можете да добавяте вашите умения и да ги категоризирате.

 

Как да го използвате

  1. Запишете вашите категории – програмни езици, дизайн, спорт или каквото желаете
  2. Въведете уменията си като трябва да посочите категорята, за която се отнасят. Вие преценете на колко процента владеете всяко умение и попълнете задължителното поле за името на умението.
  3. Добавете и икона за него, ако я няма в списъка можетеда добавите ваша като изберете картинката от полето за ъплоуд. Картинката, която качвате не е нужно да е оразмерена  точно, нужно е да бъде горе- долу в еднакво съотношение на височина и дължна, например 240х240px.
  4. Можете да качите неограничен брой икони. Като ги сложите в главната директория на скрипта в папка img/icons.
  5. След като сте въвели вашите умения и категории можете лесно да ги подреждате с drag and drop.  Нужно е да изберете директорията, в която се намират,  за да можете да ги движите.

Инсталиране

  1. Създайте базаданни на вашия Mysql  сървър и я кръстете skill_meter.
  2. Импортирайте SQL файла, който се намира в директория sql за да създадете структурата на таблицине за базаданни skill_meter.
  3. Отворете global.php файла, който се намира в директория admin. Задайте вашите $mysql_username и  $mysql_password  за да се свържеге с MySQL  базатаданни и променете по избор $admin_username и $admin_username за достъп до админ панела.
  4. Използвайте :)!

Skill meter е свободен за използване и  променяне на кода!

Демо на проекта можете да видите тук.

Можете да изтеглите Skill meter system beta 0.1 от тук.

Линк към личния ми Skill meter можете да видите тук.

За всякакви въпроси, критики и каквото се сетите можете да оставите коментар.

Javascript игра – Камък, ножица, хартия

Javascript игра – Камък, ножица, хартия


Eдна простичка игра написана изцяло на javascript. Скоро започва втората част от безплатния курс на Телерик “Уеб дизайн с HTML 5, CSS 3 и JavaScript”, където ще се изучава javascript и затова реших да се поупражнявам. Нямам голям опит точно с този език, а няма как да се мине без него, защото е много важна част от front-end програмирането.

Играта можете да видите на този линк – /game-1/. Пазете се, че компа е луд 😀

Система за измерване на уменията с HTML5, CSS3, Javascript, PHP и Mysql

Система за измерване на уменията с HTML5, CSS3, Javascript, PHP и Mysql

На скоро ми хрумна една идея, а именно да си направя страница с въведени умения на различните програми с който съм работил професионално и любителски. Затова започнах да пиша малко приложение което да има административна част за въвеждане на умението и след това клиентска част, в която да излизат красиво диаграми с проценти, който да измерват владеенето на всяко едно въведено умение. Така ще упражня и наученото от front-end курса който уча в академията на Телерик. В момента съм още на административната част, която е почти завършена, като в нея има следните функционалности:

  •  добавяне на умение
  •  редакция на умение
  •  изтриване на умение
  •  категоризиране
  •  избиране на иконка
  •  качване на собствена икона и оразмеряване
  •  drag and drop пренареждане на уменията
  •  филтриране по категории

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

Демо на направеното до сега може да разгледате на http://avaart.net/skill/admin/

В момента е в работен процес така, че нещата може да не са изписани коректно и да има проблеми с функционалността.