Diferencia entre revisiones de «Usuario:ManuelRomero/micursos/DWES/Tema1/Introduccion»
De WikiEducator
(No se muestran 43 ediciones intermedias de 2 usuarios) | |||
Línea 1: | Línea 1: | ||
− | { | + | __NOEDITSECTION__ |
− | { | + | {|cellpadding="5" cellspacing="6" style="width:100%;background:#DFFFFF; border-style:solid; border-width:2px; border-color:#0066FF;" |
+ | | width="100%" valign="top" style="padding: 0; margin:0px;" | | ||
+ | {|cellpadding="5" cellspacing="6" style="width:100%;background:#DFFFFF; border-style:solid; border-width:1px; border-color:#0066FF;" | ||
+ | | width="100%" valign="top" style="padding: 0; margin:0px;" | | ||
+ | <span style="background:#FFFF99"> | ||
+ | </span> | ||
+ | [[Imagen:DWES_TituloTema1B.gif|center]] | ||
+ | |} | ||
+ | |||
+ | |||
+ | |||
<br> | <br> | ||
+ | {{#widget:Slides}} | ||
<div class="slides layout-regular template-default"> | <div class="slides layout-regular template-default"> | ||
− | <!-- | + | <!--2------------------------------------------------------> |
<div class="slide"> | <div class="slide"> | ||
− | ==CONCEPTOS SOBRE DESARROLLO WEB== | + | ===CONCEPTOS SOBRE DESARROLLO WEB=== |
− | *El objetivo de este | + | </div> |
+ | |||
+ | |||
+ | <!--3------------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ===Qué pretende explicar este módulo=== | ||
+ | *El objetivo de este módulo lo describe '''''su propio nombre'''''. | ||
{{Objetivo|'''''Desarrollo de aplicaciónes web en entorno servidor'''''}} | {{Objetivo|'''''Desarrollo de aplicaciónes web en entorno servidor'''''}} | ||
− | *En esta introducción analizaremos | + | *En esta introducción analizaremos qué entendemos por '''''Desarrollo de aplicaciones web en el entorno servidor'''''. |
− | *Para ello vamos a ir desgranando el nombre del módulo y | + | *Para ello vamos a ir desgranando el nombre del módulo y analizándolo en cada una de sus partes. |
</div> | </div> | ||
+ | |||
+ | <!--4------------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ;Partes a analizar | ||
+ | #Desarrollar una aplicación | ||
+ | #Aplicaciones Web | ||
+ | #Entorno servidor | ||
+ | [[Imagen:Dwes_1.png|center|400px]] | ||
+ | </div> | ||
+ | |||
+ | <!--5---------------------------------------------------> | ||
+ | <div class="slide"> | ||
===Desarrollar una aplicación=== | ===Desarrollar una aplicación=== | ||
− | < | + | <hr/> |
{{Conocimiento previo|Qué es '''''Desarrollar una aplicación'''''}} | {{Conocimiento previo|Qué es '''''Desarrollar una aplicación'''''}} | ||
− | * | + | *Son muchas las posibles respuestas, pero al menos deberíamos saber dar una de forma correcta |
− | + | ||
+ | |||
</div> | </div> | ||
− | <!-- | + | |
+ | <div class="slide"> | ||
+ | <!--6---------------------------------------------------> | ||
+ | {{Actividad|Vamos a dar una definición entre todos. Aportar ideas}} | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!--7---------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ;Posible definición | ||
+ | {{Definicion| | ||
+ | *Dado un problema de naturaleza lógica, | ||
+ | *desarrollar una aplicación consiste en | ||
+ | *'''''implementar''''' o construir un programa usando un determinado lenguaje de programación, | ||
+ | *Dicho programa consiste en '''''un conjunto de instrucciones''''' que ejecutadas en un entorno computacional '''''solucionan''''' de forma automatizada '''''el problema planteado'''''.}} | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <!--8---------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | [[Imagen:DesarrollarAplicacion.png|center|700px]] | ||
+ | </div> | ||
+ | <!---8---> | ||
+ | |||
+ | <!--7---------------------------------------------------> | ||
<div class="slide"> | <div class="slide"> | ||
− | *Cuando decimos implementar nos referimos a | + | ;Desarrolar una aplicación |
+ | *Cuando decimos '''''implementar''''' nos referimos a : | ||
#'''''Analizar''''' el problema. | #'''''Analizar''''' el problema. | ||
#'''''Diseñar''''' una solución algorítmica válida. | #'''''Diseñar''''' una solución algorítmica válida. | ||
#'''''Escribir el código''''' de dicha solución utilizando uno o varios lenguajes de programación concreto, interpretables o complilables. | #'''''Escribir el código''''' de dicha solución utilizando uno o varios lenguajes de programación concreto, interpretables o complilables. | ||
</div> | </div> | ||
− | <!-- | + | |
+ | |||
+ | <!--7---------------------------------------------------> | ||
<div class="slide"> | <div class="slide"> | ||
− | = | + | ;Fases en el desarrollo tradiciona |
− | *Las instrucciones escritas de alguna | + | [[Imagen:AnalisisDiseñoImple1.png]]: |
− | * | + | {{Actividad|Realizar la aplicación '''Ecuaciones de segundo grado''' con este esquema}} |
+ | </div> | ||
+ | |||
+ | |||
+ | <!--8---------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ;Desarrollar una aplicación | ||
+ | {{Pregunta|'''''¿Compilación o interpretación?'''''}} | ||
+ | *Las instrucciones escritas, de alguna manera han de pasar a código máquina para que se puedan ejecutar en un entorno computacional. | ||
+ | *Para ello dichas instrucciones pueden '''''Compilarse o Interpretarse''''' | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!--9---------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | {{Conocimiento previo|Diferencias entre '''''Compilacion Vs Interpretación'''''}} | ||
{{Pregunta|Java es un lenguaje compilado o interpretados }} | {{Pregunta|Java es un lenguaje compilado o interpretados }} | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!--9---------------------------------------------------> | ||
+ | <div class="slide"> | ||
{{Pregunta|En un entorno de ejecución web, qué tipo de modelo se debe de usar y por qué}} | {{Pregunta|En un entorno de ejecución web, qué tipo de modelo se debe de usar y por qué}} | ||
</div> | </div> | ||
− | <!-- | + | |
+ | <!--10-----------------------------------------------------> | ||
<div class="slide"> | <div class="slide"> | ||
===Una Aplicación Web=== | ===Una Aplicación Web=== | ||
Línea 41: | Línea 122: | ||
*Normalmente en un ordenador vemos un programa o aplicación ejecutándose, con el cual podemos estar interactuando. | *Normalmente en un ordenador vemos un programa o aplicación ejecutándose, con el cual podemos estar interactuando. | ||
*No todos los programas o aplicaciones son del mismo tipo, tenemos diferentes tipos de software | *No todos los programas o aplicaciones son del mismo tipo, tenemos diferentes tipos de software | ||
− | #Aplicaciones de escritorio | + | </div> |
− | #Aplicaciones de ingeniería | + | |
− | #Aplicaciones de juegos | + | <!--11-----------------------------------------------------> |
− | #Aplicaciones web | + | <div class="slide"> |
+ | ;Tipos de aplicaciones | ||
+ | |||
+ | #Aplicaciones de escritorio. | ||
+ | #Aplicaciones de ingeniería. | ||
+ | #Aplicación de Tiempo real. | ||
+ | #Software de Inteligencia artificial. | ||
+ | #Software de predicciones metereológicas, cálculo científico. | ||
+ | #Aplicaciones de juegos. | ||
+ | #Aplicaciones web. | ||
#... | #... | ||
− | *Los diferentes lenguajes de programación son todos de propósito general, | + | </div> |
− | * | + | |
− | *También van apareciendo '''''framework''''' donde con un lenguaje de programación se toma una metodología de trabajo y | + | <!--12-----------------------------------------------------> |
+ | <div class="slide"> | ||
+ | ;Tipos de sorftware | ||
+ | *Los diferentes '''''[http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html lenguajes de programación'''''] son todos de propósito general, esto es, pueden implementar cualquier algoritmo correcto. | ||
+ | *No obstante presentan diferentes características que los hacen más idóneos para implementar código en determinados tipo de software, de modo que dependiendo el tipo de software que vamos a desarrollar deberíamos de ver que tipos de lenguajes tenemos disponibles. | ||
+ | </div> | ||
+ | |||
+ | <!--13-----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ;Tipos de sorftware | ||
+ | *Por otro la la encapsulación y abstracción en lenguajes orientada a objetos (También ocurre con la tendencia de lenguajes de tipo TAD (tipos abstractos de datos)) permite que los diferentes lenguajes ofrezcan librerías o clases en terminología OOP, que nos hacen mucho del trabajo habitual para ese tipo de aplicaciones. | ||
+ | *Son componentes que directamente podemos usar | ||
+ | </div> | ||
+ | |||
+ | <!--14-----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ;framework | ||
+ | *También van apareciendo '''''framework''''' donde con un lenguaje de programación se toma una metodología de trabajo y se adapta un determinado lenguaje (Por ejemplo creando dentro del framework determinados objetos) para facilitar el trabajo al desarrollador. | ||
+ | |||
+ | {{Recursos de la Web| | ||
+ | *[http://www.bestwebframeworks.com/ framework] para el desarrollo web}} | ||
+ | </div> | ||
+ | |||
+ | <!--16-----------------------------------------------------> | ||
+ | <div class="slide"> | ||
{{Pregunta|Qué carácterísticas tiene una apliación web}} | {{Pregunta|Qué carácterísticas tiene una apliación web}} | ||
[[Imagen:AplicacioneWeb1.png]] | [[Imagen:AplicacioneWeb1.png]] | ||
+ | </div> | ||
+ | |||
+ | <!--17-----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
*En la imagen vemos una serie de elementos | *En la imagen vemos una serie de elementos | ||
#Un entorno de cliente. | #Un entorno de cliente. | ||
#Un entorno de servidor. | #Un entorno de servidor. | ||
#Una parte de comunicaciones y protocolo. | #Una parte de comunicaciones y protocolo. | ||
+ | </div> | ||
+ | |||
+ | <!--18----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ;Entornos en una aplicación web | ||
*En realidad cada un de estas partes se estudia en sus respectivos módulos en este ciclo. | *En realidad cada un de estas partes se estudia en sus respectivos módulos en este ciclo. | ||
− | #La parte de cliente la cubren los módulos de Diseño de interfaces y Desarrollo de aplicaciones en entorno cliente | + | #La parte de '''cliente''' la cubren los módulos de '''''Diseño de interfaces''''' y '''''Desarrollo de aplicaciones en entorno cliente''''' |
− | #La parte de comunicaciones y protocolo y algo de aplicaciones del servidor en el entorno del servidor se cubre en el módulo de depliegue web. | + | #La parte de '''comunicaciones y protocolo''' y algo de aplicaciones del servidor en el entorno del servidor se cubre en el '''''módulo de depliegue web'''''. |
− | #La parte del entorno servidor la cubrimos en este módulo | + | #La parte del '''entorno servidor''' la cubrimos en este módulo: '''''Desarrollo de aplicaciones en entorno servidor'''''. |
− | + | ||
</div> | </div> | ||
− | <!-- | + | |
+ | <!--19----------------------------------------------------> | ||
<div class="slide"> | <div class="slide"> | ||
− | + | *Lógicamente una aplicación web a de tener cada una de esas partes | |
− | * | + | *Especialemente está condicionada la parte del entorno servidor |
− | * | + | *En este módulo usaremos conceptos vistos en los otros. |
− | * | + | [[Imagen:ServidorWebVsCliente.jpg]] |
− | + | ||
</div> | </div> | ||
− | <!-- | + | |
+ | <!--12----------------------------------------------------> | ||
<div class="slide"> | <div class="slide"> | ||
+ | ==El cliente en el proceso de ejecución de una aplicación web== | ||
+ | *Es el usuario final el que empieza el proceso. | ||
+ | *También se conoce como agente. | ||
+ | *En el cliente necesitamos tener una serie de elementos | ||
+ | </div> | ||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | *Un programa (navegador) dónde el usuario escribe la solicitud (Lá página a la que quiero acceder, la máquina en la que se encuentra, y dentro de la página su ubicación). | ||
+ | *Necesitamos encontrar la ip de la máquina a partir de su nombre (DNS) | ||
+ | *Interpretar y visualizar la información que el servidor nos facilite en formato html (El navegador). | ||
+ | *Ejecutar los script que aporte la respuesta del servidor por ejemplo código en java Script (Todos los navegadores modernos interpretan el código JavaScript y lo ejecutan. | ||
+ | </div> | ||
− | + | <!--13----------------------------------------------------> | |
− | + | <div class="slide"> | |
− | + | ||
− | + | ===Especificadno el recurso=== | |
− | + | ||
*El cliente hace una petición de una página web | *El cliente hace una petición de una página web | ||
− | *Para ello escribe la URI en el navegador indicando máquina | + | *Para ello escribe la URI en el navegador indicando máquina dónde está. |
− | * | + | *También nombre de la página que solicita, protocolo usado y puerto por el que realiza la solicitud. |
+ | *(En la mayoría de las ocasiones se toma el puerto por defecto para ese protocolo | ||
+ | *http 80, https 443 | ||
</div> | </div> | ||
− | <!--7> | + | |
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | *También se puede incluir lo que se llama solicitud y fragmento. | ||
+ | *'''''La solicitud''''' son parejas variabla=valor que se pasan en la solicitud | ||
+ | *'''''El fragmenta''''' representa una parte concreta de la página que se solicita, | ||
+ | *Para el fragmento se utiliza el método GET dentro del protocolo http. | ||
+ | </div> | ||
+ | <!--7--> | ||
<div class="slide"> | <div class="slide"> | ||
*ejemplo de direcciones | *ejemplo de direcciones | ||
Línea 98: | Línea 244: | ||
*Si se elude alguna parte se toma el valor por defecto o lo que establezca el servidor web | *Si se elude alguna parte se toma el valor por defecto o lo que establezca el servidor web | ||
</div> | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ==Los medios en el proceso de ejecución de una aplicación web== | ||
+ | *Aparte de la comunicación física necesitamos unos protocolos | ||
+ | *Protocolos de la familia tcp/ip. | ||
+ | *Protocolos utilizados Http, tpc/udp, piv4 ipv6 icmp, y otros muchos que se pueden usar a nivel de aplicación. | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ==El servidor en el proceso de ejecución de una aplicación web== | ||
+ | *Servidor Web | ||
+ | *Recibe e interpreta la solicitud del cliente | ||
+ | *Accede a bases de datos según necesidades | ||
+ | *Ejecuta código en el servidor, generando como resultado una página html que es lo que da al cliente | ||
+ | *(El cliente no ve el código del servidor). | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | {{Pregunta| | ||
+ | ¿Podemos visualizar una página web sin que intervenga un servidor web? | ||
+ | }} | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | <!--MRM Tarea 1--> | ||
+ | {{Actividad| | ||
+ | *Realiza en un documento usando diagramas y detallando el proceso de carga de una página web | ||
+ | *Contempla la posibilidad de tener que ejecutar script tanto en cliente como en servidor | ||
+ | *Identifica en un bloque cada uno de los elementos (CLIENTE, SERVIDOR o MEDIOS) o programas necesarios (programa navegador, protocolo http en cliente, servidor dns, interprete de javaScript, ...) | ||
+ | }} | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | ===El comando [http://es.wikipedia.org/wiki/CURL curl]=== | ||
+ | *Si no está instalado se instala fácil | ||
+ | <source lang="bash"> | ||
+ | sudo apt-get install curl | ||
+ | </source> | ||
+ | *Con este comando podemos establecer comunicación con servidores usando los diferentes protocolos que soporta. | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | ;Curl | ||
+ | *Usando la sintaxis URL podemos transferir ficheros entre cliente y servidor. | ||
+ | *Veamos algún uso que puede resultar interesante | ||
+ | *Suele ser interesante conocer los [http://es.wikipedia.org/wiki/Anexo:C%C3%B3digos_de_estado_HTTP códigos] http | ||
+ | *Nos interesará conocer los códigos del servidor 5xx | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | Ejemplos de uso del comando | ||
+ | *Ver el contenido de una página wqeb | ||
+ | '''''curl url_página_web''''' | ||
+ | *Guardar una página web en un fichero '''''-o''''' | ||
+ | '''''curl -o nombreFichero url_página_web''''' | ||
+ | *Ver la cabecera de una web | ||
+ | '''''curl --head url_pagina_web''''' | ||
+ | </div> | ||
+ | |||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | *Si la web nos redirige, hay que especificarlo con '''''-L''''' | ||
+ | '''''curl -L url_página_web''''' Para que accedamos a la página que nos redirige url_pagina_web | ||
+ | *Para ver toda la traza de información de un servidor | ||
+ | *Podemos también simular el envío de datos a un servidor bien por POST y bien por GET. Simulando un formulario. | ||
+ | Estos conceptos ya los veremos y utilizaremos mas adelante | ||
+ | </div> | ||
+ | <!--13----------------------------------------------------> | ||
+ | <div class="slide"> | ||
+ | |||
+ | {{Actividad| | ||
+ | Investiga y explica al menos 3 opciones del comando curl, pudiendo ser las vistas anteriormente}} | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | |} |
Última revisión de 09:30 25 sep 2015
|