Your SlideShare is downloading. ×
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Overview of Web and App development process
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Overview of Web and App development process

501

Published on

Published in: Education, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
501
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Designveloper Overview of Web and App development process March 11th, 2014 Hung Vo - CEO Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. 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
  • 14. JS template  Mustache.js http://www.lynda.com/JavaScript-tutorials/JavaScript-templating- mustachejs/114901/125776-4.html  Handlebar  EJS Website: http://designveloper.com Address: 250/6 Bau Cat, Ward 11, Tan Binh District, HCM City

×