Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Desarrollo de webapps 1

420 visualizaciones

Publicado el

  • Sé el primero en recomendar esto

Desarrollo de webapps 1

  1. 1. DESARROLLO DE WEBAPPS Sesión 1 HTML & CSS Fundamentals
  2. 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. 3. ¿PAGINAS WEB, SITIOS WEB O APLICACIONES WEB?¿Qué diferencia hay entre una Website y una WebApp?
  4. 4. SITIO WEB = WEBSITE = * PAGINAS WEB
  5. 5. APLICACIONES WEB = WEBAPPS
  6. 6. APPS VS WEBAPPS¿Cuál ES LA DIFERENCIA ENTRE UNA APLICACIÓN WEB Y UNA APLICACIÓN NATIVA?
  7. 7. SE EJECUTAN SOBRE… Sistema Operativo APLICACIÓN NATIVA Navegador APLICACIÓN WEB Zheref Sergio Daniel Lozano Garcia
  8. 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. 9. ¿Por que serDesarrolladorWeb?
  10. 10. Incremento critico en la demanda dedesarrolladores debido a la necesidadde tener presencia Web.
  11. 11. Debido a la creciente demanda habrán muchas ofertas laborales disponibles para nosotros, sobretodo como Freelancers.
  12. 12. Hay múltiples perfiles para desarrolladorWeb: Desde simples instalaciones deCMS, diseños y maquetados de sitiosWeb, hasta desarrollo de aplicaciones Webrobustas de alta escala.
  13. 13. Puedes trabajar como Freelancer hastaque te sientas con los suficientescontactos para formar tu iniciativaempresarial
  14. 14. Puedes implantar tus propias ideas enproyectos Web y monetizarlas demanera que puedas ganar mucho dinerocon ellas.
  15. 15. 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.
  16. 16. NAVEGADO MOVILES ESCRITORIO VIDEOJUEGO R S
  17. 17. FIREFOX CHROME SAFARI EXPLORER
  18. 18. IPHONE WINDOWSANDROID
  19. 19. WINDOWS MAC OS LINUX
  20. 20. ¿QUE ES LA WEB?
  21. 21. CLIENTE - SERVIDOR HTTP Client Response HTTPWeb Browser Request Server Web Server HTTP Protocol
  22. 22. FUNCIONALIDAD ELEMENTALDE ARQUITECTURA DE HTTP HTTP Server HTTP Web Server Protocol HTTP Client Web Browser Resources programs, files, d atabases
  23. 23. 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
  24. 24. 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
  25. 25. THE SERVER -THE WEBSERVER- The server process the request and send a response to the client. HTTP Response… Hypertext The WebServer IIS
  26. 26. ¿COMO DESARROLLAR PARA LA WEB?
  27. 27. ARQUITECTURA MINIMA DE UNA APLICACION WEB Tecnologia:Runtime: Navegador Cliente Zheref Sergio Daniel Lozano Garcia
  28. 28. ARQUITECTURA ELEMENTAL DE UNAAPLICACION WEB Cliente Runtime: Tecnologia: Servidor Runtime: Tecnologia: Chrome V8 Navegad .NET or Framework
  29. 29. ARQUITECTURA RECOMENDADA DEUNA APLICACION WEBPresentación Negocios Datos Tecnologia(s): Tecnologia(s): Tecnologia(s):
  30. 30. FRONT- ENDSe puede desarrollar usando una única tecnología dedesarrollo, famosamente conocida como… Cliente Zheref Sergio Daniel Lozano Garcia
  31. 31. HTML 5Consta de 3 lenguajes HTML CSS JavaScript Zheref Sergio Daniel Lozano Garcia
  32. 32. 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
  33. 33. Cascading StyleSheets Permite definir los estilos (como: colores, tamaños, márgenes, fuentes, s ombras, formas, transiciones y animaciones) de los elementosLenguaje visuales declarados en el HTML.de Estilos
  34. 34. 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
  35. 35. CONTINUA…PROXIMA SESION
  36. 36. <Preguntas>Gracias

×