Este documento presenta una introducción al desarrollo de aplicaciones web. Explica las diferencias entre sitios web, páginas web y aplicaciones web, y entre aplicaciones web y nativas. También describe las ventajas de ser desarrollador web y los lenguajes clave para el desarrollo web front-end como HTML, CSS y JavaScript. Finalmente, presenta una arquitectura básica recomendada para aplicaciones web.

1. DESARROLLO DE WEBAPPS
Sesión 1
HTML & CSS Fundamentals

2. ¿QUIÉN SOY?
Freelancer, emprendedor
Fundador de la Startup Instartius
Próximo Ingeniero de Sistemas
Evangelista de tecnologías Web
abiertas y tecnologías Microsoft
Programador:
Sergio Daniel Lozano García
Desarrollador:
@zheref

3. ¿PAGINAS WEB, SITIOS WEB O
APLICACIONES WEB?
¿Qué diferencia hay entre una Website y
una WebApp?

4. SITIO WEB = WEBSITE = * PAGINAS
WEB

5. APLICACIONES WEB = WEBAPPS

6. APPS VS WEBAPPS
¿Cuál ES LA DIFERENCIA ENTRE UNA APLICACIÓN
WEB Y UNA APLICACIÓN NATIVA?

7. SE EJECUTAN SOBRE…
Sistema Operativo
APLICACIÓN
NATIVA
Navegador
APLICACIÓN
WEB
Zheref
Sergio Daniel Lozano Garcia

8. DIFERENCIA ENTRE UNA APLICACION WEB Y
UNA APLICACION NATIVA
Tipo de Aplicacion Aplicacion Nativa Aplicacion Web
Se ejecutan sobre: Sistema Operativo Navegador Web
Son multiplataforma: Nunca Siempre
XAML, MXML, Java, C#,
ActionScript, C++, C, Python, Ruby,
Tecnologias de desarrollo: Scala, Objective-C, Erlang, Perl, HTML 5
Delphi, Lisp, Pascal, PHP, XUL, HTML + css + JS
etc….
Rendimiento: 100% 80%

9. ¿Por que ser
Desarrollador
Web?

10. Incremento critico en la demanda de
desarrolladores debido a la necesidad
de tener presencia Web.

11. Debido a la creciente
demanda habrán
muchas ofertas
laborales disponibles
para nosotros, sobre
todo como Freelancers.

12. Hay múltiples perfiles para desarrollador
Web: Desde simples instalaciones de
CMS, diseños y maquetados de sitios
Web, hasta desarrollo de aplicaciones Web
robustas de alta escala.

13. Puedes trabajar como Freelancer hasta
que te sientas con los suficientes
contactos para formar tu iniciativa
empresarial

14. Puedes implantar tus propias ideas en
proyectos Web y monetizarlas de
manera que puedas ganar mucho dinero
con ellas.

16. HTML 5 es lo suficientemente poderoso para permitirnos llevar nuestras
aplicaciones a móviles, a nuestro sistema operativo e incluso a
consolas de 7ma generación.

17. NAVEGADO MOVILES ESCRITORIO VIDEOJUEGO
R S

18. FIREFOX CHROME SAFARI EXPLORER

19. IPHONE WINDOWS
ANDROID

20. WINDOWS MAC OS LINUX

21. ¿QUE ES LA WEB?

22. CLIENTE - SERVIDOR
HTTP
Client Response HTTP
Web Browser Request Server
Web Server
HTTP Protocol

23. FUNCIONALIDAD ELEMENTAL
DE ARQUITECTURA DE HTTP
HTTP
Server
HTTP Web Server
Protocol
HTTP
Client
Web Browser
Resources
programs, files, d
atabases

24. THE CLIENT
-THE BROWSER-
 Sends request to the
HTTP Server best
called as Web Server.
HTTP Request…
HTTP Message
Not referring to IE
Just as the generic
Browser symbol

25. THE REQUEST
-THE MESSAGE STRUCTURE-
 The request carries a
message with a due
formatted structure.
HTTP Request…
HTTP Message
• An initial line CRLF
Any client • Zero or more header lines Any server
CRLF
• A blank line i.e. a CRLF
• An optional message body
like file, query data or
query output

26. THE SERVER
-THE WEBSERVER-
 The server process the
request and send a
response to the client.
HTTP Response…
Hypertext The WebServer
IIS

27. ¿COMO DESARROLLAR
PARA LA WEB?

28. ARQUITECTURA MINIMA DE UNA
APLICACION WEB
Tecnologia:
Runtime:
Navegador
Cliente Zheref
Sergio Daniel Lozano Garcia

29. ARQUITECTURA ELEMENTAL DE UNA
APLICACION WEB
Cliente
Runtime: Tecnologia:
Servidor
Runtime: Tecnologia:
Chrome V8
Navegad .NET
or Framework

30. ARQUITECTURA RECOMENDADA DE
UNA APLICACION WEB
Presentación Negocios Datos
Tecnologia(s): Tecnologia(s): Tecnologia(s):

31. FRONT-
END
Se puede desarrollar usando una
única tecnología de
desarrollo, famosamente conocida
como…
Cliente
Zheref
Sergio Daniel Lozano Garcia

32. HTML 5
Consta de 3 lenguajes
HTML
CSS
JavaScript
Zheref
Sergio Daniel Lozano Garcia

33. HyperText Markup Language
Permite declarar los elementos
visuales y semánticos que va a tener
nuestra página Web, como por ejemplo:
texto, párrafos, títulos, listas, tablas, navbars, m
Lenguaje enus, controles, botones, campos de
texto, imágenes, audio, video y más…
Declarativo

34. Cascading StyleSheets
Permite definir los estilos (como:
colores, tamaños, márgenes, fuentes, s
ombras, formas, transiciones y
animaciones) de los elementos
Lenguaje visuales declarados en el HTML.
de Estilos

35. JavaScript
Permite mediante programación
manipular el estado de los elementos
declarados en el HTML, crear nuevos
elementos y programar una lógica de
Lenguaje de negocios, en caso de ser necesario,
TODO en tiempo de ejecución.
Programación

36. CONTINUA…
PROXIMA SESION

37. <Preguntas>
Gracias