Photoshop – Course Project

Abbout my Course Project:

After quite a few hours of hard work, another course is finished! So in this post, i decided to share my course project. Based on it we are allowed (or denied) to take our exam.

So here is the link to a png picture of my project:

https://www.dropbox.com/s/hnhl9zom9cf3jow/photography.png

And here is a link to the PSD file + some annimations I made 🙂 .

https://www.dropbox.com/s/vgve9ctrqh7quyt/PhotoshopCourseProject.rar

P.S. Bare in mind that if you want to open the animations you will need the Extended version of Photoshop 🙂

Aboute the Photoshop course:

If you are interested in the course and what to see what we were you to this past few months, you can visit it’s official page: Photoshop Course  , where you can find all of the materials and videos 🙂 .

All and all – it was a great course!

Mind Map Presentation Project

So today me, and my team finished our site for the course – “Teamwork and knowledge sharing”, so i decided to make a short post about it, and show you what we have done! 🙂

What is a Mind Map ?

Qute from Wikipedia:

A mind map is a diagram used to visually outline information. A mind map is often created around a single word or text, placed in the center, to which associated ideas, words and concepts are added. Major categories radiate from a central node, and lesser categories are sub-branches of larger branches.Categories can represent words, ideas, tasks, or other items related to a central key word or idea.

Mindmaps can be drawn by hand, either as “rough notes” during a lecture or meeting, for example, or as higher quality pictures when more time is available. An example of a rough mind map is illustrated.

Other terms for this diagramming style are: “spider diagrams,” “spidergrams,” “spidergraphs,” “webs”, “mind webs”, or “webbing”, and “idea sun bursting”.(A “spider diagram” used in mathematics and logic is different.)

What is Mind Map Presentation Project ?

The main idea here is to make a site for mind maps developed for the book “Introduction to programming with C#” and to systemize them. The mindmaps where created by other teams for the course “Teamwork and knowledge sharing” and we made the site to host them.

What languages and technologies to we use to make Mind Map Presentation Project ?

The main technologies used where – HTML5, CSS3, JavaScript, JQuery and a JQuery Plugin – Easy Tabs .

Where can i see the site and it’s code?

Here is the link to the site – Click

Currently Offline

And a link to its GitHub Repository.

 

В борбата с бъдещия изпит по CSS :)

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

1. Instant eyedropper – омръзнало ли ви е да теглите 1 кило приставки за браузъри или да отваряте Photoshop всеки път когато трябва да вземете някой цвят ? Ако да, това е едно от вашите спасения 🙂 С помощта на този tool това става само с няколко кликания и драгвания на мишката.

Този tool ми бе препоръчан и показан от колегата Svilen_Ivanov и отдавам цялата заслуга за намирането му на него. Ето и темата която той пусна навремето в форума на Телерк Академи цък.

Така че ако го нямата ви съветвам да го свалите – улеснява доста селектирането на цветове 🙂

Може да го свалите от тук: http://instant-eyedropper.com/

2. Firebug Lite for Chrome – т.к. главно използвам Firefox за мой браузър и там главния ми инструмент при проверка на HTML/CSS ми е Firebug се чувствах доста странно когато ми се наложи да използвам Dev Tools на Chrome. Като цяло този add-on добавя малко орязана версия на Firebug за Chrome и позволява на тези от нас който са свикнали с Firebug да използват основните му функции и в Chrome.

Може да го свалите от тук: Цък.

3. Web developer tool bar – ако нямате това разширение горещо ви препоръчвам да си го сложите. Т.к. функциите тук са доста ще ви покаже някои от основните който могат да ви помогнат за предстоящия изпит:

3.1. Меню Tools:

Както виждате тук ни се предоставят най-различни опции за валидация и други благинки. Край на досадното copy paste -> валидатор, просто цъкаме на валидирай и сме готови 🙂

3.2. Resize –

Тук ни се предоставят доста възможности за прегледн на Уеб Сайта ни в различна обстановка. Примерно ако цъкнем на View Responsive Layouts ни показва сайта ни в най-различни резолюции или даже имаме предифинарана резолюция за 1024×768 – резолюцията на която ще се тестват нашите произведения от изпита.

3.3. Outline – очертава най-различни видове елементи за по-добро визуално представяне ( float-нати, с определена позиция и т.н. )

3.4. Miscellaneous – може би най-полезният инструмент тук е Display Ruler с който може да измервате големината на елементите 🙂  ( Забележка – Хром нещо не иска да прилага този инструмент в/у снимки. Ако някой знае решение да пише в темата )

Ето един пример: Цък.

3.5. Information – много подменюта, като от тях най-много ми хареса Display Color Information – показва ви всички цветове на страницата 🙂

Пример – всички цветове на страницата на студентската система: Цък.

Може да го свалите от тук: Цък.

4. Как лесно да сравни сайта ни с картинката предоставена на изпита ? – прост в един таб отворете картинката, а в другия до него вашето творение – преминавайте от единия таб към другия за да видите разликте.

Та това е от мен, ако се сетя за още нещо ще го добавя и дано тези ви помогната в борбата с бъдещия изпит 🙂

CSS въведение: селектори, стилове, класове – Домашни

След курса по HTML основи, логично преминаваме в CSS, за да се научим да правим всякакви шарении и глезотии 😀 .  В първата тема – CSS въведение: селектори, стилове, класове , ни бяха представени основните механизми на CSS, начини за избиране на дадени елементи, важност на CSS правилата и т.н. В следващите няколко реда ще представя моите решения и логиката ми зад тях.

Задача 1 – Simple Ticket

Тук създавам структурата с таблица ( може и без, но за това се изискват знания, които още нямаме ), слагам класове на текста с един и същ цвят, и добавям точката, чрез картинка ( може да се направи и само с CSS ).
За сваляне от DropBox: – Цък

HTML и CSS в jsFiddle: –  Цък

Задача 2 – Simple Styled Table

В общи линии пак създавам структурата с таблица, стилизирам заглавните клетки с нужния фон, използвам някои от новите псевдо селектори за останала стилизация ( Примерно да се редува оцветяването на редовете през едно ).
За сваляне от DropBox: – Цък

HTML и CSS в jsFiddle: – Цък

Задача 3 – Simple Web Page

Целта ( според мен ) тук е да стилизираме предоставения ни HMTL без да го променяме. За целта използвам новите CSS3 селектори.
За сваляне от DropBox: – Цък

HTML и CSS в jsFiddle: – Цък

Какво е Zen-Coding и трябва ли да го използваме ?

В няколкото години в които съм се занимавал с писането на HTML и многото досадни Copy + Paste случай, реших да потърся алтернатива на тази досада и така без да искам попаднах на Zen-Coding.

Но какво всъщност е Zen-coding и защо трябва да го ползвам ?

Та в същността си Zen-coding представлява разширение за почти всички по-популярни IDE, което улеснява и намалява значително времето за писане на код.

Добре, как ускорява писането на код ?

Със прости съкратени команди може да генерирате значително количество код. Ето пример:

Имате нужда от div, в които има неподреден списък с 5 елемента, в които има линк. Пишете си в IDE-то : div>ul>li*5>a , натискаме Ctrl+E ( това е шорткъта за “разпъване” на код ) и ни изкрава готовия HTML код:

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

Искаме елементите на листа да имат клас “item”. Няма проблем: Пишете си в IDE-то : div>ul>li.item*5>a и вече имаме готов HTML код:

<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>

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

Но откъде да си го сваля ?

Тук може да намерите най-новата версия на Zen-Coding – цък

Заключение

Силно ви препоръчвам да ползвате Zen-Coding, тъй кат без него ще прекарате доста часове в Copy + Paste на НТМL код;