Desarrollo de webapps 1
Descargar como PPTX, PDF0 recomendaciones550 vistas
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.
Desarrollo de webapps 1
- 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%
- 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