Web Applications

  • 393 views
Uploaded 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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
393
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
13
Comments
0
Likes
1

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. 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 - iam@qennix.com