The document discusses web applications and outlines an agenda covering their evolution, human resource issues, architecture, and frontend concepts. It describes the roles of various individuals involved in web development like designers, web masters, application developers, frontend developers, and backend developers. It also discusses technology standards and tools used in web development as well as concepts like progressive enhancement, cross-browsing, and best practices for frontend development.

1. Web Applications
Today

2. 1. Web Applications Evolution
2. Human Resources Issue
3. Architecture
4. Frontend Concepts
5. Homework
Agenda

3. WWW, Web 2.0 y RealTime Web
Users
1

4. WWW, Web 2.0 y RealTime Web
Resources
1
Bandwidth
Users

5. 1 WWW, Web 2.0 y RealTime Web
Technology
Standards
Tools
Learning
Curve
Development
Time
TCP/IP AJAX WebSocket

6. 2 What people is involved?
Designer Web Master
Application
Developer

7. 2 What about the user?
Web
Master
Application
Developer
Designer
User

8. 2 What about the resources?
Web
Master
Application
Developer
Designer
User
Resources

9. 2 What about the technology?
Web
Master
Application
Developer
Designer
User
Client Side
Resources
Server Side
Resources
Technology

10. Designer Technolo
gy
User
2 Complexity or Simplicity
UX Designer

11. Web Master
Application
Developer
Client Side
Resources
Technology
Frontend
Developer
2 Complexity or Simplicity

12. 2 Complexity or Simplicity
Web Master
Application
Developer
Technology
Server Side
Resources
Server Side
Resources
Backend
Developer
Hosting
Specialist

13. 3 Architecture
Human Resources
Web Application
Frontend Developer Backend Developer
Hosting Specialist (Usually Third Party or IT )
UX
Designer
User
Direct Interaction Experience Cycle Use Monitoring

14. 3 Architecture
Software
Frontend
Backend
BROWSER
Client
DATA
HTML
Preprocessor
Javascript
Engine
Local Storage
DOM
TransportLayer
CODE
Frameworks
Libraries
Models
Source Code
Memory

15. 4 Frontend Developer
Profile
Front End engineers give sites
strength & resilience,
appearance & form, and
functionality & interactivity.

16. 4 Frontend Development
Fundamentals
Cross Browsing

17. Frontend Development
Progressive Enhancement
4
Content
(HTML)
Layout
(CSS)
Behavior
(Javascript)
1 2 3

18. Frontend Development
Specialization
4
CROSSBROWSING
HTML
CSS
Javascript

19. Frontend Development
Best Practices
4
● 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 be
used at production time.
● Use separate folders to handle libraries.
● If you need to change something in a library please
don't
● If you need really change something, do an override

20. Frontend Development
Best Practices
4
● 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 greater
than 2K/IE

21. Homework5
Do you consider be a
frontend developer?
Why?
Do you think frontend
developers and
backend developers
have different kind of
responsibilities?
Can you describe
which role are you
playing in your
projects?
How about MVC or
other model pattern
applied to frontend?

22. Enrique Ponce de Leon (@qennix)
Development Team Leader - Colosa Inc.
enrique@colosa - iam@qennix.com