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 02:45 20 feb 2016
|