Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

DesignveloperOverview of Web and App development processMarch 11th, 2014

Hung Vo - CEO

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Agenda

- Web development process

- Design

- Convert to HTML/CSS

- Manipulate animation

- Create JS template

- Database and logic processing

- Focus on

- What is important

- How to get things done faster

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Design

Using PSD, Illustrator

Arrange workspace

Understand different screen size

Color types, color profile

Layers, layer comp

Text styling

Image Sprite

Image types: JPEG, GIF, PNG

Grid system http://guideguide.me/

http://www.gridsystemgenerator.com/

Ref: http://www.lynda.com/Photoshop-tutorials/Photoshop-Web-Design/105368-2.html

http://www.lynda.com/Photoshop-tutorials/Photoshop-CC-One-One-Fundamentals/124096-2.html

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

HTML/CSS

HTML5

Tags http://www.w3schools.com/tags/

Attributes

Validate your HTML - http://validator.w3.org/

CSS3

CSS selector - http://www.w3schools.com/cssref/css_selectors.asp

CSS specificity - http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Validate your CSS - http://jigsaw.w3.org/css-validator/

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

PSD to HTML/CSS

Keyboard shortcuts

How to get info about:

Text

Image

Color

Dimension

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Frameworks

Bootstrap - http://getbootstrap.com/, http://bootswatch.com/

Zurb Foundation - http://foundation.zurb.com/

jQuery Mobile - http://jquerymobile.com/

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

CSS preprocessor

LESS / SASS - http://lesscss.org/ - http://sass-lang.com/

http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Animation manipulation

HTML5 Canvas - http://www.lynda.com/HTML-5-tutorials/HTML5-Graphics-and-Animation-with-Canvas/80782-2.html

CSS http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html

http://www.lynda.com/Dreamweaver-tutorials/CSS-Transitions-Transforms/101072-2.html

jQuery

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

JavaScript

Animation manipulation

Database and logic manipulation

Focus:

Objects – how it works, define objects

Events - http://www.w3schools.com/js/js_events_examples.asp

JSON - http://www.w3schools.com/json/

Ajax - http://www.w3schools.com/ajax/default.asp https://api.jquery.com/jQuery.ajax/

Ref:

http://www.w3schools.com/js/DEFAULT.asp

http://www.lynda.com/JavaScript-tutorials/Essential-Training/81266-2.html

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

NoSQL

Not Only SQL

http://www.lynda.com/NoSQL-tutorials/Up-Running-NoSQL-Databases/111598-2.html

Saves data as BSON objects (Binary JSON)

MongoDB http://try.mongodb.org/

Redis: http://try.redis.io/

Pub/Sub for realtime processing

http://redis.io/topics/pubsub

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

jQuery

Write less, do more

$:object

$ = select

$(css expression)

$.

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Backbonejs

MVC for frontend

Event

Model

Collection

View

http://www.lynda.com/Backbonejs-tutorials/Up-Running-Backbonejs/120900-2.html

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

Nodejs

JavaScript that runs on server

Event-driven

Non-blocking IO model

Perfect for data intensive real time apps that run across distributed devices

Soket.io : realtime processing

http://www.lynda.com/JavaScript-tutorials/Nodejs-Essential-Training/141132-2.html

Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

JS template

Mustache.js

http://www.lynda.com/JavaScript-tutorials/JavaScript-templating-mustachejs/114901/125776-4.html

Handlebar

EJS