Web Applications
Upcoming SlideShare
Loading in...5

Web Applications



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.



Total Views
Views on SlideShare
Embed Views



1 Embed 1

http://www.qennix.com 1



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Web Applications Web Applications Presentation Transcript

  • Web ApplicationsToday
  • 1. Web Applications Evolution2. Human Resources Issue3. Architecture4. Frontend Concepts5. HomeworkAgenda
  • WWW, Web 2.0 y RealTime WebUsers1
  • WWW, Web 2.0 y RealTime WebResources1BandwidthUsers
  • 1 WWW, Web 2.0 y RealTime WebTechnologyStandardsToolsLearningCurveDevelopmentTimeTCP/IP AJAX WebSocket
  • 2 What people is involved?Designer Web MasterApplicationDeveloper
  • 2 What about the user?WebMasterApplicationDeveloperDesignerUser
  • 2 What about the resources?WebMasterApplicationDeveloperDesignerUserResources
  • 2 What about the technology?WebMasterApplicationDeveloperDesignerUserClient SideResourcesServer SideResourcesTechnology
  • Designer TechnologyUser2 Complexity or SimplicityUX Designer
  • Web MasterApplicationDeveloperClient SideResourcesTechnologyFrontendDeveloper2 Complexity or Simplicity
  • 2 Complexity or SimplicityWeb MasterApplicationDeveloperTechnologyServer SideResourcesServer SideResourcesBackendDeveloperHostingSpecialist
  • 3 ArchitectureHuman ResourcesWeb ApplicationFrontend Developer Backend DeveloperHosting Specialist (Usually Third Party or IT )UXDesignerUserDirect Interaction Experience Cycle Use Monitoring
  • 3 ArchitectureSoftwareFrontendBackendBROWSERClientDATAHTMLPreprocessorJavascriptEngineLocal StorageDOMTransportLayerCODEFrameworksLibrariesModelsSource CodeMemory
  • 4 Frontend DeveloperProfileFront End engineers give sitesstrength & resilience,appearance & form, andfunctionality & interactivity.
  • 4 Frontend DevelopmentFundamentalsCross Browsing
  • Frontend DevelopmentProgressive Enhancement4Content(HTML)Layout(CSS)Behavior(Javascript)1 2 3
  • Frontend DevelopmentSpecialization4CROSSBROWSINGHTMLCSSJavascript
  • 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
  • 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
  • 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?
  • Enrique Ponce de Leon (@qennix)Development Team Leader - Colosa Inc.enrique@colosa - iam@qennix.com