Embed Size (px)
DESCRIPTION
Citation preview
By Alfi Rizka – Dedicated IT
<WEB NINJA />
Alfi Rizka [email protected]
FB: fb.com/avikaco | twitter : @avikaco
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.
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.
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
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)
AGENDA – DAY 5 :Putting All Together• Create your own website from what you have
learn,• Show your portfolio.
WHY YOU SHOULD
BE A NINJA?HOW?
ALWAYS OPEN-MINDED!
FOLLOW THE WAYS OF THE NINJA
LET ALL NEW INFORMATION COMING
TO YOU
PRACTICE MAKES PERFECT
SETUP YOUR WORK ENVIRONMENT
• NEVER EVER install XAMPP (or other server) in drive C (system partition)
• Move htdocs & mysql data folder out from XAMPP folder installation, Create saperate disk partition if possible.
• Protect your localhost & MySQL from external IP.
• Use Dropbox to sync your data IF you working on multiple computer.
DROPBOX STRUCTURE
Your Web Drive (w:)
XAMPP
Apache
PHP
MySQL
DROPBOX
htdocs
MySQL Data
h t t p : / / w w w. d ro p b ox . c o m
DEMO
FOLDER STRUCTURE
Web Drive (w:)
Dropbox
htdocs
MySQL Data
XAMPP Resources
eBook
Screencast
Web Design
TEMP
FOLDER STRUCTURE
htdocs
Webaxis Projects
Client A
Project #1
Project #2
Client B …
Personal Projects Playground Resource
s
FOLDER STRUCTURE
Project
_DONT_UPLOAD
Document (email / chat)
Design (PSD, slice, etc)
js css Images …
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
DEMO
TOOLShow to help your job easier?
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
BROWSER1.Chrome
PLUGINS: Yslow, PHP Ninja Manual, Page Archiver, Ultimate User Agent, Screen Capture, Rull-screen, Color Zilla, JSON View, dll.
2.FirefoxPLUGINS: Firebug, Yslow, Web Developer, Scrapbook Plus, Fireshoot, Measure It, Color Zilla, JSON View, dll.
3.Internet Explorer 94.Safari5.Adobe Browser Lab
(browserlab.adobe.com)
6.IE Tester (my-debugbar.com/ietester)
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
MAIL & RSS CLIENT• Outlook• Thunderbird (mozilla.org/thunderbird)
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)
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)
RESOURCES
TOP 10 WEBSITE RESOURCES1.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)
QA ?
