Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/algoritmica/programacionWeb»
De WikiEducator
(Página creada con «{{Usuario:ManuelRomero/JavaScript/algoritmica/nav}} __NOTOC__») |
|||
| Línea 1: | Línea 1: | ||
{{Usuario:ManuelRomero/JavaScript/algoritmica/nav}} | {{Usuario:ManuelRomero/JavaScript/algoritmica/nav}} | ||
__NOTOC__ | __NOTOC__ | ||
| + | __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> | ||
| + | {{#widget:Slides}} | ||
| + | <div class="slides layout-regular template-default"> | ||
| + | |||
| + | |||
| + | <!--2------------------------------------------------------> | ||
| + | <div class="slide"> | ||
| + | ===CONCEPTOS SOBRE DESARROLLO WEB=== | ||
| + | </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'''''}} | ||
| + | *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 analizándolo en cada una de sus partes. | ||
| + | </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=== | ||
| + | <hr/> | ||
| + | {{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 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"> | ||
| + | ;Desarrolar una aplicación | ||
| + | *Cuando decimos '''''implementar''''' nos referimos a : | ||
| + | #'''''Analizar''''' el problema. | ||
| + | #'''''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. | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <!--7---------------------------------------------------> | ||
| + | <div class="slide"> | ||
| + | ;Fases en el desarrollo tradiciona | ||
| + | [[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 }} | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <!--9---------------------------------------------------> | ||
| + | <div class="slide"> | ||
| + | {{Pregunta|En un entorno de ejecución web, qué tipo de modelo se debe de usar y por qué}} | ||
| + | </div> | ||
| + | |||
| + | <!--10-----------------------------------------------------> | ||
| + | <div class="slide"> | ||
| + | ===Una Aplicación Web=== | ||
| + | <br/> | ||
| + | {{Conocimiento previo|Qué es una '''''Aplicación Web'''''}} | ||
| + | *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 | ||
| + | </div> | ||
| + | |||
| + | <!--11-----------------------------------------------------> | ||
| + | <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. | ||
| + | #... | ||
| + | </div> | ||
| + | |||
| + | <!--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}} | ||
| + | [[Imagen:AplicacioneWeb1.png]] | ||
| + | </div> | ||
| + | |||
| + | <!--17-----------------------------------------------------> | ||
| + | <div class="slide"> | ||
| + | |||
| + | *En la imagen vemos una serie de elementos | ||
| + | #Un entorno de cliente. | ||
| + | #Un entorno de servidor. | ||
| + | #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. | ||
| + | #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 del '''entorno servidor''' la cubrimos en este módulo: '''''Desarrollo de aplicaciones en entorno servidor'''''. | ||
| + | </div> | ||
| + | |||
| + | <!--19----------------------------------------------------> | ||
| + | <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> | ||
| + | |||
| + | <!--12----------------------------------------------------> | ||
| + | <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 | ||
| + | *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> | ||
| + | |||
| + | <!--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"> | ||
| + | *ejemplo de direcciones | ||
| + | |||
| + | #Usando fragmento | ||
| + | |||
| + | '''protcolo://maquina/ruta/recurso/fragmento''' | ||
| + | '''''http://www.unizar.es/deiss/notas.html#primerCurso''''' | ||
| + | #Usando solicitud | ||
| + | '''protcolo://maquina/ruta/recurso/solicitud''' | ||
| + | '''''http://www.unizar.es/deiss/notas.htmll?nombre="Manuel"&modulo="DWES"''''' | ||
| + | #Usando el puerto | ||
| + | '''protcolo://maquina/ruta/recurso:puerto/''' | ||
| + | '''''http://www.unizar.es:80/''''' | ||
| + | *Si se elude alguna parte se toma el valor por defecto o lo que establezca el servidor web | ||
| + | </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> | ||
| + | |||
| + | |||
| + | |||
| + | |} | ||
Revisión de 13:45 19 feb 2016
|






