За да ги усовршите техниките во веб развојот или во било која друга област, најдобриот пристап е преку учество во практични активности. Тоа овозможува не само да се научат концептите, туку и веднаш да се применат.
Усовршете ги претходно стекнатите знаења од курсот jQuery: основи и станете фронт-енд развивач работејќи на практични проекти. Курсот е составен од 10 интересни проекти со чија помош ќе ви бидат прикажани најдобрите практики за фронт-енд развој.
Проект 1: HTML5 видео галерија
Во овој проект ќе развиеме интерактивна видео галерија за на веб, притоа работејќи во околина на програмирање со комбинација на HTML5 и Flash резерва, CSS, и JavaScript библиотеката со отворен код, jQuery. Овој курс ви покажува како да дизајнирате распоред на сајт и да конструирате код за плеер кој работи на повеќе веб прелистувачи, платформи и мобилни уреди. Ќе ви ги демонстрираме и техниките со кои ќе овозможите HTML5 видео на Android и ќе обезбедите постарите верзии на Internet Explorer предодредено да се префрлаат на Flash наместо HTML5.
Теми:
• Подготвување на графиките
• Додавање и поврзување копчиња со мали сликички
• Дизајнирање распоред
• Додавање jQuery и JavaScript
• Вклучување информации за видеото во линковите
• Додавање стил на малите сликички со CSS правила
• Креирање DIV елемент содржател за кодот на видео плеерот
• Прилагодување клик настани за малите сликички
• Инкорпорирање FancyBox додаток
Проект 2: Интерактивна мапа
Во овој проект ќе ви покажеме како да дизајнирате и креирате богата интерактивна мапа за веб сајт, работејќи во околина на програмирање и употребувјќи jQuery. Преоктот опфаќа креирање слики оптимизирани за веб со алатката за исечоци во Photoshop, имплементирање HTML и CSS за да се состави распоредот на страницата, и додавање интерактивност со JavaScript и брзата и концизна библиотека за код на jQuery.
Теми:
• Подготвување на веб графиките
• Креирање главен елемент содржател
• Работа со линкови со CSS
• Додавање паѓачко мени
• Превземање на jQuery и додавање интерактивност на проектот
• Креирање детали за градот
• Презапишување на клик настаните на анкор таговите со jQuery
Проект 3: Интерактивна анимирана временска лента
Научете како да креирате интерактивна и анимирана временска лента со jQuery. Во овој проект ќе ви покажеме како да креирате лизгачка временска лента со маркери за дата и поврзана содржина. Раскажете ја својата приказна, или приказната на вашата организација, со графички богата, интерактивна времеска лента.
Теми:
• Подготвување на сликата
• Прилагодување на датотеките за проектот
• Креирање на HTML елементи содржатели
• Додавање содржина во HTML елементи содржатели
• Додавање стил на временската лента со CSS
• Додавање jQuery на вашиот проект
• Прилагодување распоред со jQuery
• Додавање елементи за навигација
• Анимирање на содржината врз основа на навигацијата
• Додавање опции за автоматски почеток и детекција на големина на
Проект 4: Менија за навигација
Откријте како да додадете стилизирани паѓачки менија за вашиот веб сајт употребувајќи HTML, CSS, и JavaScript. Во овој краток проект ќе го погледнеме процесот на дизајнирање, ќе објасниме како да изградите основа за менија употребувајќи неподредена листа, како да воспоставите хиерархија со вгнездени подменија, да нанесете стил CSS правила, и да инкорпорирате функционалност на паѓачко мени употребувајќи jQuery додаток.
Проект 5: Вртелешка
Во овој проект ќе видите како да имплементирате и прилагодите анимација на интерактивна вртелешка со jQuery. Покриени се подготвување на слики и дополнителен текст за во вртелешката, креирање елементи содржатели со HTML и CSS, и активирање на вртелешката со JavaScript. Исто така ќе научите и како да додадете слики во елементите содржатели, да прилагодите дополнителен текст и да додадете анимирани транзиции помеѓу дополнителните текстови.
Теми:
• Експортирање графики од Adobe Photoshop
• Креирање HTML, CSS, и JavaScript датотеки
• Позиционирање елементи со CSS
• Употреба на додатокот Roundabout
• Контролирање на вртелешката со прилагодени копчиња
• Детектирање на сликата во фокус
• Додавање завршни елементи
Проект 6: Совет на екран
Советите на екран ја подобруваат употребливоста на вашиот веб сајт обезбедувајќи инструкции и помош на посетителите. Во овој проект ќе научите како да конвертирате текст или графика во совет на екранот кој реагира на глувче. Туторијалот ќе ви демонстрира како да го напишете неопходното HTML и да го активирате советот со jQuery, да додадете позиционирање и ефекти.
Теми:
• Зачувување веб графики од Photoshop
• Креирање елемент содржател за советот на екран
• Додавање jQuery $(document).ready() и настани со глувче
• Детектирање и прилагодување HTML совети на екран
• Прикачување на елемент содржателот кон глувчето
• Прилагодување на советот за тој постепено да се појавува и губи
Проект 7: Панел со јазичиња со лизгање
Интерфејсот на панелот со јазичиња е класична опција која треба да ја инкорпорирате во својот дизајн, но најчесто е статиччи елемент. Овој проект ќе ви покаже како да креирате динамички панел со јазичиња кој се лизга. Ќе употребуваме комбинација од HTML, CSS, и jQuery. Процесот ќе го започнеме од самиот почеток, од градење на елементи содржатели, до додавање стил на текст, јазичиња и панели, и додавање на клик настани за интереактивност на јазичињата. Ќе ви демонстрираме како да ја инкорпорирате техниката за прогресивно подобрување, за пшосетителите кои немаат JavaScript да може да и пристапат на содржината.
Теми:
• Креирање елементи содржатели за главниот панел и јазичињата
• Додавање содржина во елемент содржателите
• Додавање CSS стилови на текстот и јазичињата
• Додавање функција jQuery $(document).ready()
• Додавање клик настани на јазичињата
• Прилагодување на автоматски почеток при вчитување на страницата
• Креирање прилагодени графики за панелите
• Доделување прилагодени класи на HTML елементи
• Предоделување на CSS правила со JavaScript
Проект 8: Анимирани премини
Во овој проект ќе додадеме интерактивност на една видео галерија употребувајќи ја JavaScript библиотеката jQuery. Работејќи во околина на програмирање, ќе ви покажеме како да ги анимирате дополнителните текстови и иконата за пуштање, да ги проширите малите сликички како филмски ленти и да ја менувате позадината на филмската лента за да се менува на премин со CSS.
Теми:
• Ажурирање на CSS за да се подготви за анимираните дополнителни текстови
• Додавање jQuery hover состојба
• Прлиагодување на JavaScript бројач
• Анимирање на позадините на филмската лента со мали сликички
Проект 9: Анимиран графикон со ленти
Во овој проект ќе креираме анимиран графикон со ленти или други графики со jQuery. Овој пристап е динамичен и му дозволува на дизајнерот да ја прилагодува големината на графиконот и да му дозволи на jQuery да ги пресмета новите позиции и големина на лентите врз основа на податоците поврзани со секоја од лентите. Исто така ќе погледнете како да дизајнирате графикон со HTML и CSS, како и да креирате ознаки и да прилагодувате задоцнувања jQuery.
Теми:
• Додавање ознаки за лентите на графиконот
• Додавање jQuery и CSS во HTML документ
• Декларирање и прилагодување на глобални варијабили
• Пишување прилагодени функции за позиционирање на лентите
• Додавање ознаки и текст за вредност во лентите
• Анимирање на лентите врз основа на нивната вредност
• Постепено појавување на ознаките со вредност на лентите по анимирање на лентите
• Прилагодување на големината на графиконот со ажурирање на CSS вредностите
Проект 10. НПП листа која се проширува
Најчесто поставуваните прашања (НПП) се популарен аспект на секој веб сајт. Во овој проект ќе ви покажеме како да креирате прашања кои имаат одговори кои се појавуваат и собираат под прашањето. Ќе научите како да изградите секција за НПП на вашиот сајт, употребувајќи прилагодлива комбинација на HTML, CSS, JavaScript, и jQuery. Дополнително, курсот демонстрира како автоматски да се поврзе нештото кон одредено прашање, и автоматски да се отвори одговорот, со што ќе добиете можност да им обезбедите директен одговор на прашањето на корисниците.
Теми:
• Креирање на папки за проектот
• Превземање и прилагодување на работната околина на Aptana Studio
• Креирање HTML, CSS и JavaScript датотеки
• Активирање НПП вртелешка со JavaScript
• Додавање едноставна содржина во прашањето и одговорот
• Креирање CSS правила за графики
• Анимирање на состојби на графиките
Кому му е наменет овој курс?
Овој курс им е наменет на:
- лица кои сакаат да станат веб дизајнери и веб девелопери
- дизајнери кои сакаат да ги прошират својот сет вештини
- студенти
Предзнаења
За следење на овој курс потребно е поседување знаења содржани во курсевите:
Практичен дел
Во рамки на практичниот дел од курсот, студентот ќе добие задачи кои ќе треба да ги изработи и достави до својот ментор.
Сертификат
По успешното завршување на курсот, учесникот добива сертификат за успешно завршен курс. Под успешно завршување се подразбира навремено доставување на најмалку 80% од предвидените задачи.
Формат на курсот
Курсот се изведува на далечина, со користење на методологијата менторирано учење на далечина.
Цена
7.669 ден (пакет Премиум)
Вклучено во цената
- 30 дена пристап до материјалите за учење
- 4 x 15 мин. менторски сесии (1-на-1, online)
- сертификат за успешно завршен курс
Ментори
Петар Трајковски, .NET програмер со 12 годишно искуство. Има работено на сајтови со милионска посетеност (PlayBoy, Dr.Oz) а предизвик му е оптимизација на .NET и SQL код. Бил предавач на Академијата на ИТ Александрија како инструктор за веб дизајн. Во моментот работи за клиенти од Америка и Канада на развој на апликации во област на Research Management.
Денис Арслановски, front-end веб девелопер. Експерт за HTML, CSS, jQuery и прилагодлив (responsive) дизајн. Изработува веб страници за клиенти претежно за европскиот и австралискиот пазар.
Прашања?
Доколку имате било какво прашање, обидете се одговорот да го најдете во делот Одговори на најчесто поставувани прашања.
