Your SlideShare is downloading. ×
Web Applications
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

Web Applications


Published on

Little presentation made for my company created to explain web applications evolution, define the people involved and show the architecture and fundamentals of frontend development.

Little presentation made for my company created to explain web applications evolution, define the people involved and show the architecture and fundamentals of frontend development.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web ApplicationsToday
  • 2. 1. Web Applications Evolution2. Human Resources Issue3. Architecture4. Frontend Concepts5. HomeworkAgenda
  • 3. WWW, Web 2.0 y RealTime WebUsers1
  • 4. WWW, Web 2.0 y RealTime WebResources1BandwidthUsers
  • 5. 1 WWW, Web 2.0 y RealTime WebTechnologyStandardsToolsLearningCurveDevelopmentTimeTCP/IP AJAX WebSocket
  • 6. 2 What people is involved?Designer Web MasterApplicationDeveloper
  • 7. 2 What about the user?WebMasterApplicationDeveloperDesignerUser
  • 8. 2 What about the resources?WebMasterApplicationDeveloperDesignerUserResources
  • 9. 2 What about the technology?WebMasterApplicationDeveloperDesignerUserClient SideResourcesServer SideResourcesTechnology
  • 10. Designer TechnologyUser2 Complexity or SimplicityUX Designer
  • 11. Web MasterApplicationDeveloperClient SideResourcesTechnologyFrontendDeveloper2 Complexity or Simplicity
  • 12. 2 Complexity or SimplicityWeb MasterApplicationDeveloperTechnologyServer SideResourcesServer SideResourcesBackendDeveloperHostingSpecialist
  • 13. 3 ArchitectureHuman ResourcesWeb ApplicationFrontend Developer Backend DeveloperHosting Specialist (Usually Third Party or IT )UXDesignerUserDirect Interaction Experience Cycle Use Monitoring
  • 14. 3 ArchitectureSoftwareFrontendBackendBROWSERClientDATAHTMLPreprocessorJavascriptEngineLocal StorageDOMTransportLayerCODEFrameworksLibrariesModelsSource CodeMemory
  • 15. 4 Frontend DeveloperProfileFront End engineers give sitesstrength & resilience,appearance & form, andfunctionality & interactivity.
  • 16. 4 Frontend DevelopmentFundamentalsCross Browsing
  • 17. Frontend DevelopmentProgressive Enhancement4Content(HTML)Layout(CSS)Behavior(Javascript)1 2 3
  • 18. Frontend DevelopmentSpecialization4CROSSBROWSINGHTMLCSSJavascript
  • 19. Frontend DevelopmentBest Practices4● Always use Progressive Enhancement● Write always unobtrusive Javascript● Build a development environment to build● Use always you can pseudo-coders to generate html,css and javascript.● Avoid run javascript code at the HEAD section● Package css and javascript files in single files to beused at production time.● Use separate folders to handle libraries.● If you need to change something in a library pleasedont● If you need really change something, do an override
  • 20. Frontend DevelopmentBest Practices4● Try to use images only for web resolutions● Try to join several small image files into a sprite● Remember, all web is about content, deliver it.● Use UTF-8 to server css and js files● Comment your code always● Use GET for Ajax Request unless payload is greaterthan 2K/IE
  • 21. Homework5Do you consider be afrontend developer?Why?Do you think frontenddevelopers andbackend developershave different kind ofresponsibilities?Can you describewhich role are youplaying in yourprojects?How about MVC orother model patternapplied to frontend?
  • 22. Enrique Ponce de Leon (@qennix)Development Team Leader - Colosa Inc.enrique@colosa -