Web Ninja
Download as PPTX, PDF•1 like•679 views
This document outlines the agenda for a 5-day training on becoming a web ninja. Day 1 covers why attendees should be ninjas and how to set up their work environments. Day 2 focuses on HTML and CSS basics. Day 3 covers JavaScript and jQuery. Day 4 covers PHP and MySQL. Day 5 has attendees create their own websites combining the skills learned. The document also provides tips on file structures, tools to use, and top web resources for ninjas.
Web Ninja
- 1. <WEB NINJA /> By Alfi Rizka – Dedicated IT Alfi Rizka T. [email protected] FB: fb.com/avikaco | twitter : @avikaco
- 2. AGENDA – DAY 1 : Introduction • Why you should be a Ninja? • Setup your work environment (install & configure XAMPP server, setup security) • Project / folder structure & file naming, • Tools, know how to make your job easier, • Resources • QA? • TRY your self.
- 3. AGENDA – DAY 2 : Basic Programing Part 1: HTML & CSS • How to be a HTML & CSS Ninja? • Understanding HTML basic knowledge • Understanding CSS basic knowledge • Understanding reset.css & grid system on CSS framework • DEMO • Resources • QA? • TRY your self: create your own website.
- 4. AGENDA – DAY 3 : Basic Programing Part 2: Javascript • Javascript basic knowledge • Understanding JavaScript Object Notation (JSON) • Be a Javascript Ninja with jQuery Framework • DOM manipulation & AJAX • DEMO • Common mistake when writing Javascript • Debugging & tracing Javascript code • Resources • QA? • Try your self: create a simple guestbook + form validation
- 5. AGENDA – DAY 4 : Basic Programing Part 3: PHP & MySQL • Understanding database relation • Basic SQL query • PHP basic knowledge • DEMO: Create a simple login form • Common mistake when writing PHP code • Debugging, profiling & tracing your PHP code • Function & Object Oriented Programing (OOP) • Working together as REAL TEAM, • Try your self, create a simple login & manage questbook (delete, update)
- 6. AGENDA – DAY 5 : Putting All Together • Create your own website from what you have learn, • Show your portfolio.
- 7. WHY YOU SHOULD HOW? BE A NINJA?
- 9. FOLLOW THE WAYS OF THE NINJA
- 10. LET ALL NEW INFORMATION COMING TO YOU
- 11. PRACTICE MAKES PERFECT
- 12. • NEVER EVER install XAMPP (or other server) in drive C (system partition) SETUP YOUR WORK ENVIRONMENT if possible. • Move htdocs & mysql data folder out from XAMPP folder installation, Create saperate disk partition • Protect your localhost & MySQL from external IP. • Use Dropbox to sync your data IF you working on multiple computer.
- 13. DROPBOX STRUCTURE http://www.dropbox.com Your Web Drive (w:) XAMPP DROPBOX Apache htdocs PHP MySQL Data MySQL
- 14. DEMO
- 15. FOLDER STRUCTURE Web Drive (w:) Dropbox XAMPP Resources TEMP htdocs eBook MySQL Data Screencast Web Design
- 16. FOLDER STRUCTURE htdocs Webaxis Projects Personal Projects Playground Resources Client A Client B … Project #1 Project #2
- 17. FOLDER STRUCTURE Project _DONT_UPLOAD js css Images … Document (email / chat) Design (PSD, slice, etc)
- 18. FILE NAME STANDART • Use _ (underscore) for important files & folders, eg: _update_notes.txt • Use date (format: YYYYMMDD) as suffix for backup files, eg: index_20120524.php • Group file by similarity, eg: order_checkout.php, order_confirm.php, order_delete.php • Use your initial name or corporate as prefix filename if you create new file name, eg: Avi_Framework.php, Webaxis_Gallery.php
- 19. DEMO
- 20. TOOLS how to help your job easier?
- 21. IDE (INTEGRATED DEVELOPMENT ENVIRONMENT) • Zend Studio (zend.com/studio) • Adobe Dreamweaver (adobe.com/dreamweaver) • Notepad++ (notepad-plus-plus.org) • Eclipse + PDT (www.eclipse.org) * Orange color = FREE software
- 22. BROWSER 1. Chrome PLUGINS: Yslow, PHP Ninja Manual, Page Archiver, Ultimate User Agent, Screen Capture, Rull-screen, Color Zilla, JSON View, dll. 2. Firefox PLUGINS: Firebug, Yslow, Web Developer, Scrapbook Plus, Fireshoot, Measure It, Color Zilla, JSON View, dll. 3. Internet Explorer 9 4. Safari 5. Adobe Browser Lab (browserlab.adobe.com) 6. IE Tester (my-debugbar.com/ietester)
- 23. SERVER • XAMPP (apachefriends.org) • Zend Server (zend.com/server) • Internet Information Service / IIS (iis.net) FTP CLIENT • CuteFTP (www.globalscape.com) • FileZilla (filezilla-project.org) • …etc
- 24. MAIL & RSS CLIENT • Outlook • Thunderbird (mozilla.org/thunderbird)
- 25. UTILITY • Dropbox (dropbox.com) • PHP Manual (php.net/manual/en/index.php) • SimpLESS (wearekiss.com/simpless) • jQAPI (jqapi.com) • MySQL GUI Tools (dev.mysql.com/downloads/gui-tools) • MySQL Workbench (dev.mysql.com/downloads/workbench) • Regex Coach (weitz.de/regex-coach) • ZenCoding (code.google.com/p/zen-coding)
- 26. WEB BASE UTILITY • Yslow (yslow.org) • W3C Validator (validator.w3.org) • JS Fidle (jsfiddle.net) • Creately Diagram (creately.com) • Colour Lovers (colourlovers.com) • Google Page Speed (developers.google.com/speed) • Google Webmaster (google.com/webmasters) • Google Closure (developers.google.com/closure) • CSS3 Generator (css3please.com , css3generator.com ,) • Javascript Beautifier (jsbeautifier.org)
- 27. RESOURCES
- 28. TOP 10 WEBSITE RESOURCES 1. Net Tuts (net.tutsplus.com) 2. Smashing Magezine (smashingmagazine.com) 3. Web Appers (webappers.com) 4. Mashable (Mashable.com) 5. 1st Web Design (www.1stwebdesigner.com) 6. Web Resources Depot (www.webresourcesdepot.com) 7. CSS Tricks (css-tricks.com) 8. Design Inspiration (thedesigninspiration.com) 9. Icon Finders (iconfinder.com) 10.Favorite Web Awards / FWA (thefwa.com)
- 29. QA ?
- 30. THANKS Alfi Rizka T. [email protected] FB: fb.com/avikaco | twitter : @avikaco
Editor's Notes
- #2: Introduce your self,Tanya bagaimanateknikbelajarselamaini.Mungkinandabertanyakenapajudulnyapresentasinya “<Web Ninja/>” ? Karena di presentasiiniakanmengajarkanteknik-teknik yang mungkinbelumpernahdiajarkan, danjikaandabelajarsendiriperluwaktu yang lama untukmendapatkanteknik-teknik yang akan di bahas di presentasiini.Ada satukalimat yang sangatmemotifasisaya, kalimatituberbunyi: **dengarkanbaik-baik, inisetengahkebatinan** ^_^“Jikakamumenginginkansesuatu yang belumpernahkamumiliki, makalakukanlahsesuatu yang belumpernahkamulakukan”.
- #6: Public variable ($_GET, $_ POST, $_ COOKIE, $_ SESSION & $_ SERVER)
- #8: Sebelummenjawabpertanyaanini, tanyakanke audience, apakahadailmu yang tidakberguna? Tidakada, ilmu yang tidakbergunasebenernyaadalahilmu yang bergunatapikitabelum tau kegunaannyaatausaatinibelum tau menggunakannya.Allah berfirman, “Dan tidaklahakuciptakan yang sepertiitudengansia-sia”, jadisemuapastiadagunanya.Kembalikepertanyaan, kenapaandaharusjadi professional?Bisamembantu orang lain, karenasebaik-baik orang manusiaadalah yang bermanfaatbagi orang lain.Agar mampubersaingdengan yang lain, Jikaandajadi pro di bidangini, andaakan di hargailebihmahal, janganjadi orang yang rata-rata, karena orang yang rata-rata dihargai rata-rata, jadijikaandamenjadi PRO di bidanginiituartinyaanak-anakandabisasekolah di sekolah yang baik, punyaasuransiuntuksemuakeluarga, tidakperlukhawatirsaatbelanja, dll.
- #9: Inisangatpenting,bagaimanacaranyailmubisamasukkalootakmutertutup?Apamusuhilmupengetahuan? KESOMBONGAN, ilmutidakmaumasukpada orang-orang yang sombong, perhatikandisekelilingkita, orang yang sombongbiasanyatidakterlalupintar.Jadi, bukalahotakmu agar ilmubisamasuk, ihklaslahmendengarbiarpunkitasudahpernah tau, siapa tau adahalbaru yang belumkitaketahui.
- #10: Cara tercepatmenujusuatutempat yang belumpernahkitadatangiadalahmengikutijalan orang yang sudahpernah, benertidak?Logikanya, kalomaujadisingamakatirulahperilakusinga, janganmeniruperilakuayam.Iniadalahcaratercepat, tapiperlu di ingat TIDAK ADA cara instant untuksukses.
- #11: Kesalahanumumparapelajar di Indonesia adalahsibukmencariinformasibaru,Sebenarnyakitabisamenghematwaktudenganmembiarkaninformasi yang mendatangikita, caranyabagaimana? Subscribe ke RSS, ikutmailinglist, aktif di komunitas programming, dll.
- #12: Menurutpenelitian, ilmu yang akanbertahan lama di otakkitaadalahilmu-ilmu yang kitalatihsendiri, bukanilmu yang di ajarkan orang lain, ilmu yang diajarkan orang lain biasanyahanyasebagai trigger untukdiolahlebihdalamlagi.
- #13: Setup your work environment (install & configure server, setup security)
- #16: Bisatidakmenancapkanpakuketembokhanyadenganmenggunakantangan? Bisasaja, tapisetelahitutanganmupastiakan berdarah2.Orang yang hanyapunyapalu, akanmenyelesaikansesuatudenganpalunya, padahaladakalanyakitabutuhpisauuntukmemotong.WARNING: JANGAN MENGGUNAKAN NOTEPAD UNTUK CODING!!!!!!! Jikaandaingindipujihebatkarenabisa coding pake notepad, sayaakanmemujidengan “Kamukunosekali!”, please open minded,
- #17: Plugin apasaja yang pentingdanbagaimanacarapakenya,
- #18: Plugin apasaja yang pentingdanbagaimanacarapakenya,
- #19: Plugin apasaja yang pentingdanbagaimanacarapakenya,