Slide 1

Slide 1 text

@kahwee [email protected] Getting started on web app development Teng Kah Wee

Slide 2

Slide 2 text

@kahwee [email protected] Getting started on web app development 1. Use prototyping software to show ideas 2. Build it with frameworks & libraries 3. Leverage on cloud computing

Slide 3

Slide 3 text

Design prototyping

Slide 4

Slide 4 text

Axure Create Prototypes of Websites & Apps Without Coding http://www.axure.com/

Slide 5

Slide 5 text

InVision Polished interaction prototyping http://www.invisionapp.com/

Slide 6

Slide 6 text

Framer.js Framer is a new creative tool to build interaction and animation prototypes. http://framerjs.com/

Slide 7

Slide 7 text

Frameworks and Libraries

Slide 8

Slide 8 text

@kahwee [email protected] Frameworks and Libraries • Bootstrap • Foundation • jQuery Mobile

Slide 9

Slide 9 text

Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. http://getbootstrap.com/

Slide 10

Slide 10 text

Foundation Responsive design gets a whole lot faster for users. http://foundation.zurb.com/

Slide 11

Slide 11 text

jQuery Mobile A Touch-Optimized Web Framework http://jquerymobile.com/

Slide 12

Slide 12 text

@kahwee [email protected] Leveraging on cloud computing • Available service models 1. Infrastructure as a service (IaaS) 2. Platform as a service (PaaS) 3. Software as a service (SaaS)

Slide 13

Slide 13 text

@kahwee [email protected] Infrastructure as a service (IaaS) • Hosting and virtual machines • Examples: • Amazon EC2 • Google Compute Engine • Rackspace Cloud

Slide 14

Slide 14 text

@kahwee [email protected] Platform as a service (PaaS) • Development platforms like Azure gives you database and storage stack so you don’t have to worry about configuring those • Examples: • AWS Elastic Beanstalk • Windows Azure • Heroku, force.com

Slide 15

Slide 15 text

@kahwee [email protected] Software as a service (SaaS) • Most SaaS applications can be run directly from a web browser without any downloads. • Examples: • Google Gmail • Microsoft 365 • Adobe Creative Cloud

Slide 16

Slide 16 text

Slide 17

Slide 17 text

@kahwee [email protected] Learn more • http://apprenda.com/library/paas/iaas-paas-saas-explained- compared/ • http://www.bootply.com/ • http://www.codecademy.com/en/tracks/htmlcss • http://learn.shayhowe.com/html-css/