1 / 53

Curso de Java y Aplicaciones Web

Curso de Java y Aplicaciones Web. Programación Web. Facultad Politécnica – U.N.A. . Ing. Esteban Ramírez edre@gmail.com. Objetivos. Curso de Java y Aplicaciones Web. Introducción a las aplicaciones Web. Arquitectura de las aplicaciones Web. Html, JavaScript, Ajax y CSS.

tareq
Télécharger la présentation

Curso de Java y Aplicaciones Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Curso de Java y Aplicaciones Web Programación Web Facultad Politécnica – U.N.A. Ing. Esteban Ramírez edre@gmail.com

  2. Objetivos Curso de Java y Aplicaciones Web Introducción a lasaplicaciones Web Arquitectura de lasaplicaciones Web Html, JavaScript, Ajax y CSS. Programacion Web con Java Ejemplobásico

  3. Aplicaciones web Curso de Java y Aplicaciones Web Aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador.

  4. Ejemplos de Aplicaciones web

  5. http://www.pol.una.py/cursoWeb.pdf Servidor DNS Servidor Web ¿IP de www.pol.una.py? 170.51.6.71 Browser Usuario Arquitectura de una aplicación Web Conexión TCP al puerto 80 del host 170.51.6.71 Solicitar recurso cursoWeb.pdf Solicitud en formato HTTP Servidor envía respuesta sobre Conexión TCP Cerrar Conexión TCP

  6. Arquitectura de una aplicación Web • Browser(Firefox, IE, Chrome) • Red (Intranet - Internet) • Protocolo HTTP (HyperText Transfer Protocol) • Servidor Web (Apache, IIS, Tomcat) • Servidores de bases de datos (Oracle, MySql) • Servicios Web externos (Cotizaciones, Clima)

  7. Evolución de las tecnologías para aplicaciones web

  8. Tipos de contenido • Páginas estáticas: Archivos físicos almacenados en disco • Páginas dinámicas: Contenido generado por programas ejecutados en el servidor

  9. Lenguajes Web en servidor PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”. ASP .NET Desarrollado para resolver las limitantes de su antecesor ASP. Para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Completamente orientado a objetos. Ambiente Microsoft. PERL Es la alternativa más popular a PHP, es el acronimo de "PracticalExtraction and ReportLanguage" uno de los lenguajes más antiguos para este segmento. Gran cantidad de módulos ya escritos. Deriva ampliamente del lenguaje C. PYTHON Creado en el año 1990, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Programación estructurada y orientada a bojetos. Multiplataforma. Opensource. RUBY Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.

  10. Lenguajes Web en servidor PHP Es un lenguaje de programación utilizado para la creación de sitio web. PHP es un acrónimo recursivo que significa “PHP Hypertext Pre-processor”. ASP .NET Desarrollado para resolver las limitantes de su antecesor ASP. Para desarrollar web sencillas o grandes aplicaciones. Para el desarrollo de ASP.NET se puede utilizar C#, VB.NET o J#. Completamente orientado a objetos. Ambiente Microsoft. PERL Es la alternativa más popular a PHP, es el acronimo de "PracticalExtraction and ReportLanguage" uno de los lenguajes más antiguos para este segmento. Gran cantidad de módulos ya escritos. Deriva ampliamente del lenguaje C. PYTHON Creado en el año 1990, es el sucesor del lenguaje de programación ABC. Python es comparado habitualmente con Perl. Programación estructurada y orientada a bojetos. Multiplataforma. Opensource. RUBY Es un lenguaje interpretado de muy alto nivel y orientado a objetos. Software Libre. Multiplataforma. Su sintaxis está inspirada en Phyton, Perl.

  11. Lenguaje en el cliente • HTML - HyperTextMarkupLanguage • JavaScript • CSS (Cascading Style Sheets) • Flash • Othersresources

  12. Composición de las interfaces Web • Ejemplo.html <html> <body> <p> Hola Mundo<b> 2011</b> </p> <form name=“formulario”> <input type=“button” value=“Click aquí”> </form> </body> </html>

  13. Composición de las interfaces Web • JavaScript <html> <script> function mostrarMensaje() { alert(“Usted ha hecho click”); } </script> <body> <form name=“formulario”> <input type=“button” value=“Click aquí” onclick=“mostrarMensaje()”> </form> <imgsrc=“imagenes/dibujo1.gif”> </body> </html> Las funciones JavaScript puedenestar en archivosseparados

  14. Composición de las interfaces Web • CSS (Cascading Style Sheets) body { font-family: Georgia, Times, "Times New Roman", serif; color: #030; } h1, h2, h3 { font-family: Georgia, Times, "Times New Roman", serif; color: #030; } Puede estar dentro de la misma página o en archivos externos

  15. HTML – Hypertext Markup Language • Estructura de un documento HTML <html> <head> <title>My first HTML document</title> </head> <body> <h2>My first HTML document</h2> Hello, <i>World Wide Web!</i> <a hfref=“http://www.pol.una.py”>Un link</a> </body> </html>

  16. HTML – Hypertext Markup Language • Hipertextoó Enlaces … <a href="http://www.oreilly.com">Link a otrositio</a> … <a href=“otraPagina.html”>Link relativo al mismositio</a> …

  17. HTML – Hypertext Markup Language • Formularios <form method=“post” action=“guardarPersona.php”> Cedula: <input type=“text” name=“cedula”> Nombre: <input type=“text” name=“nombre”> Contraseña: <input type=“password” name=“passwd”> Sexo: <input type=“radio” name=“sexo” value=“M”> Masculino <input type=“radio” name=“sexo” value=“F”> Femenino Nacionalidad: <select name=“nacionalidad”> <option value=“py”>Paraguaya</option> <option value=“br”>Brasilera</option> <option value=“ar”>Argentina</option> </select> <input type=“submit” value=“Guardar”> </form>

  18. HTML – Hypertext Markup Language • Formulariosvisualización

  19. HTML – Hypertext Markup Language • Tablas <table> <tr> <th>Cédula</th><th>Nombre</th> </tr> <tr> <td>123456</td><td>Juan Pérez</td> </tr> <tr> <td>987432</td><td>MaríaGonzález</td> </tr> </table> Datos en forma tabular. Disposición de elementos en una página.

  20. CSS – Cascading Style Sheets • Inlinestyles <html><body> … <h1 style="color: blue; font-style: italic"> Título en azul y cursiva </h1> … <p style=“font-family: arial; font-style: bold"> Párrafo en negrita y arial </p> … </body></html>

  21. CSS – Cascading Style Sheets • Documentlevelstyles <html> <head> <title>Página de párrafos en azul</title> <style type="text/css"> p {color: blue; font-style: italic} </style> </head> <body> <p>Un párrafo en azul</p> ... <p>Otropárrafo en azul</p> … </body> </html>

  22. CSS – Cascading Style Sheets • External Style Sheets En el archivo estilos.css: p {color: blue; font-style: italic} En el archivo pagina.html: <head> <title>Página de párrafos en azul</title> <link rel=stylesheet type="text/css“ href=“estilos.css"> </head> <body> <p>Un párrafo en azul</p> ... <p> Otropárrafo en azul</p> …

  23. CSS – Cascading Style Sheets • Anidamiento #top { background-color: #ccc; padding: 1em ; color: #cccccc; } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } <div id=“top”> <h1>Texto 1</h1> <p>Texto 2</p> <p style=“color:green”>Texto 3</p> </div>

  24. DHTML, JavaScript y CSS Definición de estilos con JavaScript <HTML> <HEAD> <STYLE TYPE="text/javascript"> tags.H1.color = "red" tags.H1.textTransform = "capitalize" tags.P.color = "blue" </STYLE> </HEAD> <BODY> <H1>Some heading</H1> <P>Some paragraph text.</P> </BODY> </HTML>

  25. J2EE Java Platform, Enterprise Edition o Java EE http://es.wikipedia.org/wiki/Java_EE

  26. Servlets - Funcionamiento Servidor de aplicaciones Usuario 1

  27. Servlets - Funcionamiento Servidor de aplicaciones Usuario javax.servlet.http.HttpServlet Servlet 2 1

  28. Servlets - Funcionamiento Servidor de aplicaciones Usuario javax.servlet.http.HttpServlet Servlet 2 1 3 pagina.html

  29. Servlets - Funcionamiento Servidor de aplicaciones Usuario javax.servlet.http.HttpServlet Servlet 2 1 3 4 pagina.html

  30. Servlets - Funcionamiento Servidor de aplicaciones Usuario javax.servlet.http.HttpServlet Servlet 2 1 3 5 4 pagina.html

  31. Servlets Conteiner (Servidores de aplicaciones J2EE) GlassFish Apache Tomcat

  32. Servlets Conteiner (Servidores de aplicaciones J2EE) GlassFish Apache Tomcat

  33. Servlets Conteiner (Servidores de aplicaciones J2EE) Registrar Tomcat en NetBeans Tools -> Servers

  34. Servlets - Ejemplo

  35. Servlets – proyecto Test

  36. Servlets – proyecto Test

  37. Servlets – proyecto Test

  38. Servlets – proyecto Test

  39. Servlets - Ejemplo Archivo de configuración dependiente del server Archivo de configuración de la App. Web. Archivos xHtml Archivos .java Librerías .jar

  40. Servlets – Test.java

  41. Servlets – Test.java

  42. Servlets – Web.xml

  43. Servlets – Run

  44. Servlets - Ejemplo • http://localhost:8080/Test/Test

  45. Servlets - Ejemplo • http://localhost:8080/Test?nombre=CursoJava

  46. Servlets - Ejemplo • http://miservidor:8080/Test?nombre=CursoJava

  47. Iteración con pagina Html

  48. Estructura de una App Web .war (Web Application Archive)

  49. Frameworks

  50. Frameworks En el desarrollo de software, un framework es una estructura conceptual y tecnológica de soporte definida, normalmente con artefactos o módulos de software concretos, con base en la cual otro proyecto de software puede ser organizado y desarrollado.

More Related