Intro to mobile development
N485
Instructor
Todd Shelton
What we will learn
• responsive and adaptive design
• CSS Pre-processors
• SASS
• LESS (this is the one for this class)
• Stylus
•PhoneGap
• HTML5
• Javascript/jQuery
Responsive
VS
Adaptive
RESPONSIVE DESIGN
These are sites that respond to the device.
Use percentages to adjust sizes
Has no fixed widths or heights
Nice for large and medium
Adaptive Design
These sites adapt their widths to their device
Great for smaller devices
You need to use media queries
Examples:
Which is better?
Either will do the job. Just make sure your site fits in the browser on all devices.
Building Apps
Tools:
Native Code:
Java - Android
iOS - Objective C
Microsoft - Visual C++ C#
Build Once Publish Anywhere:
Sencha - JS/Senca API
Titanium - JS/TI API
Flash Builder - AS3/Flex
PhoneGap - HTML5/JS/CSS
Why Phonegap
You just need to know HTML5/JS/CSS
You can use jQuery Mobile
You can use Media Queries
PhoneGap Build:
A tool used to publish your code to each device
Easy to use, and builds in the cloud
Update your code using a zip file or Git
FREE
Editors:
This is the software that you edit your code with.
Sublime Text 2
Aptana
Brackets
VIM - Terminal
Dreamweaver
Webstorm
Many many more
Sublime Text 2
This editor looks simple but is every powerful.
It is simple and has code hinting
You need to get used to it if your are new to coding
Really not good for beginners - my opinion
Fast and smart
aptana studio
Built on Eclipse
Very powerful
A lot of build in features - Git, SVN
Nice for beginners
FREE
Brackets
This is by Adobe
Very similar to Sublime Text
Open source
Free
Code hinting
May not be good for beginners
VIM/VI-Terminal
This is a text editor inside of the terminal on Mac
This is very similar to EMAC
You should really know the terminal to use
Not for a beginner
Simple text editing
No code hinting
Dreamweaver
Made by Adobe
Very easy to use
Has a WYSIWYG built in
Has some nice features
Has code hinting
Professionals don't claim to use it :)
PhoneGap Build is built in
Does not have Git
Webstorm
This is a very powerful editor
Not for a new coder
Has a lot of features but hard to find them
Great code hinting
Cost money
SVN/Git
These are revision control for projects
Great for team projects
Both have versioning
Github is the (in) thing now
SVN is still used in big companies
I recommend using these to preserve your code
Now The Tools:
Decide on the editor for coding
Download a LESS compiler
Windows/Mac - http://wearekiss.com/simpless
or
CodeKit - Mac only recommended
Create account on PhoneGap Build
MyPage Account
Lets Get Started
INtro to mobile development
By tweenout
INtro to mobile development
- 478
