Diferencia entre revisiones de «Usuario:ManuelRomero/php/NewPHP/B1T1/Conceptos Generales»

De WikiEducator
Saltar a: navegación, buscar
 
(59 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 
{{:Usuario:ManuelRomero/dwes/B1T1/nav}}
 
{{:Usuario:ManuelRomero/dwes/B1T1/nav}}
 
__TOC__
 
__TOC__
−
<!--__NOEDITSECTION__-->
+
__NOEDITSECTION__
 
{|cellpadding="5" cellspacing="6" style="width:100%;background:#DFFFFF; border-style:solid; border-width:2px; border-color:#0066FF;"  
 
{|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;" |
 
| width="100%" valign="top" style="padding: 0; margin:0px;" |
Línea 10: Línea 10:
 
[[Imagen:DWES_TituloTema1B.gif|center]]
 
[[Imagen:DWES_TituloTema1B.gif|center]]
 
|}
 
|}
−
 
−
 
  
 
<br>
 
<br>
Línea 28: Línea 26:
 
===Qué pretende explicar este módulo===
 
===Qué pretende explicar este módulo===
 
*El objetivo de este módulo lo describe '''''su propio nombre'''''.
 
*El objetivo de este módulo lo describe '''''su propio nombre'''''.
−
{{Objetivo|'''''Desarrollo de aplicaciónes web en entorno servidor'''''}}
+
{{MRM_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'''''.
 
*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.
 
*Para ello vamos a  ir desgranando el nombre del módulo y analizándolo en cada una de sus partes.
Línea 47: Línea 45:
 
===Desarrollar una aplicación===
 
===Desarrollar una aplicación===
 
<hr/>
 
<hr/>
−
{{Conocimiento previo|Qué es '''''Desarrollar una aplicación'''''}}
+
<div style="width:70%;padding:5px>
 +
{{MRM_Conocimiento previo|Qué es '''''Desarrollar una aplicación'''''}}
 
*Son muchas las posibles respuestas, pero al menos deberíamos saber dar una de forma correcta
 
*Son muchas las posibles respuestas, pero al menos deberíamos saber dar una de forma correcta
−
 
+
</div>
−
 
+
 
</div>
 
</div>
 +
  
 
<div class="slide">
 
<div class="slide">
 
<!--6--------------------------------------------------->
 
<!--6--------------------------------------------------->
−
{{Actividad|Vamos a dar una definición entre todos. Aportar ideas}}
+
<div style="width:70%;padding:5px>
 +
{{MRM_Actividad|Intenta dar una definición de '''''qué es desarrollar una aplicación''''', aporta ideas}}
 +
</div>
 
</div>
 
</div>
  
Línea 63: Línea 64:
 
<div class="slide">
 
<div class="slide">
 
;Posible definición
 
;Posible definición
−
{{Definicion|
+
{{MRM_Definicion|
−
*Dado un problema de naturaleza lógica,
+
*Dado un problema de naturaleza lógica
−
*desarrollar una aplicación consiste en
+
{{MRM_Definicion|Title=Desarrollar una aplicación consiten en:|
−
*'''''implementar''''' o construir un programa usando un determinado lenguaje de programación,
+
*'''''Implementar''''' o construir un programa,
−
*Dicho programa consiste en '''''un conjunto de instrucciones''''' que ejecutadas en un entorno computacional '''''solucionan''''' de forma automatizada '''''el problema planteado'''''.}}
+
*usando un determinado lenguaje de programación.
 +
*Dicho programa consiste en '''''un conjunto de instrucciones''''',
 +
}}
 +
}}
 +
</div>
 +
<div class="slide">
 +
{{MRM_Definicion|
 +
{{MRM_Definicion|
 +
*que ejecutadas en un entorno computacional,
 +
*'''''solucionan''''' de forma automatizada '''''el problema planteado'''''.}}
 +
}}
 +
}}
 
</div>
 
</div>
  
Línea 74: Línea 86:
 
<!--8--------------------------------------------------->
 
<!--8--------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
−
[[Imagen:DesarrollarAplicacion.png|center|700px]]
+
 
 +
*Para desarrollar una aplicación o  programa
 +
#Hay que entenderlo muy bién lo que queremos hacer
 +
#Hay que planificarlo
 +
#Hay qu realizar esa planificación y probarla
 +
*Observa la siguiente imagen  que reune diferentes la consecuencia de diferentes mitos  en el desarrollo.
 +
</div>
 +
<div class="slide">
 +
[[Imagen:DesarrolloAplicaciones.jpg|center|700px]]
 
</div>
 
</div>
−
<!---8--->
 
  
−
<!--7--------------------------------------------------->
+
<!--9--------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;Desarrolar una aplicación
 
;Desarrolar una aplicación
Línea 84: Línea 103:
 
#'''''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, interpretados o complilados.
 
</div>
 
</div>
 +
<!-- http://www.devjoker.com/contenidos/Tutorial-ASPNET-MVC/518/Fundamentos-de-funcionamiento-de-una-aplicacion-web.aspx -->
  
  
−
<!--7--------------------------------------------------->
+
<!--10--------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;Fases en el desarrollo tradicional
 
;Fases en el desarrollo tradicional
 
[[Imagen:AnalisisDiseñoImple1.png]]:  
 
[[Imagen:AnalisisDiseñoImple1.png]]:  
−
{{Actividad|Realizar la aplicación '''Ecuaciones de segundo grado''' con este esquema}}
+
</div>
 +
<div class="slide">
 +
{{MRM_Actividad|Realizar la aplicación '''Ecuaciones de segundo grado''' con este esquema}}
 
</div>
 
</div>
  
 +
<!--10--------------------------------------------------->
 +
<div class="slide">
 +
<br />
  
−
<!--8--------------------------------------------------->
+
*Observa la siguiente imagen.
 +
*Usando un caso de uso un poco personal realizamos este estudio detallado.
 +
<hr />
 +
<!--[[Imagen:Ecuaciones_grado.png|900px]]-->
 +
<hr />
 +
 
 +
</div>
 +
 
 +
<!--11--------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;Desarrollar una aplicación
 
;Desarrollar una aplicación
−
{{Pregunta|'''''¿Compilación o interpretación?'''''}}
+
{{MRM_Pregunta|'''''¿Compilación o interpretación?'''''}}
 +
<br />
 
*Las instrucciones escritas, de alguna manera han de pasar a código máquina para que se puedan ejecutar en un entorno computacional.  
 
*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'''''
 
*Para ello dichas instrucciones pueden '''''Compilarse o Interpretarse'''''
Línea 105: Línea 139:
  
  
−
<!--9--------------------------------------------------->
+
<!--12--------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
−
{{Conocimiento previo|Diferencias entre '''''Compilacion Vs Interpretación'''''}}
+
{{MRM_Conocimiento previo|Diferencias entre '''''Compilacion Vs Interpretación'''''}}
−
{{Pregunta|Java es un lenguaje compilado o interpretados }}
+
{{MRM_Pregunta|Java es un lenguaje compilado o interpretados }}
 
</div>
 
</div>
  
  
−
<!--9--------------------------------------------------->
+
<!--13--------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
−
{{Pregunta|En un entorno de ejecución web, qué tipo de modelo se debe de usar y por qué}}
+
{{Quiz_Multiple_Choice
 +
|title=En un entorno de ejecución web, qué tipo de modelo se debe de usar
 +
|body=
 +
*Un entorno compilado, es mucho más rápido
 +
** Incorrecto
 +
*** Es más rápido, pero está limitado a un tipo de máquina, no sirve.
 +
** Correcto
 +
*** Es adaptable a cualquier arquitectura (con el intérprete correcto, claro).
 +
*Un entorno interpretado, se adapta a cualquier tipo de máquina
 +
** Correcto
 +
*** Es necesario adaptarse a difentes máquinas
 +
** Incorrecto
 +
*** Revisa tu respuesta
 +
|mix=false
 +
|hint=
 +
}}
 +
 
 
</div>
 
</div>
  
−
<!--10----------------------------------------------------->
+
<!--14----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
===Una Aplicación Web===
 
===Una Aplicación Web===
 
<br/>
 
<br/>
−
{{Conocimiento previo|Qué es una '''''Aplicación Web'''''}}
+
{{MRM_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.
 
*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
 
</div>
 
</div>
  
−
<!--11----------------------------------------------------->
+
<!--15----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;Tipos de aplicaciones
 
;Tipos de aplicaciones
Línea 140: Línea 190:
 
</div>
 
</div>
  
−
<!--12----------------------------------------------------->
+
<!--16----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;Tipos de sorftware
 
;Tipos de sorftware
Línea 147: Línea 197:
 
</div>
 
</div>
  
−
<!--13----------------------------------------------------->
+
<!--17----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;Tipos de sorftware
 
;Tipos de sorftware
Línea 154: Línea 204:
 
</div>
 
</div>
  
−
<!--14----------------------------------------------------->
+
<!--18----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
 
;framework
 
;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.
 
*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|
+
{{MRM_Recursos de la Web|
 
*[http://www.bestwebframeworks.com/ framework] para el desarrollo web}}
 
*[http://www.bestwebframeworks.com/ framework] para el desarrollo web}}
 
</div>
 
</div>
  
−
<!--14----------------------------------------------------->
+
<!--19----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
  
−
{{Actividad|Title=Framework|
+
{{MRM_Actividad|Title=Framework|
 
Investiga y haz una breve exposición de algún framework que te llame la atención relacionado con la programación web}}
 
Investiga y haz una breve exposición de algún framework que te llame la atención relacionado con la programación web}}
 
</div>
 
</div>
  
−
<!--16----------------------------------------------------->
+
<!--20----------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
−
{{Pregunta|Qué carácterísticas tiene una apliación web}}
 
−
[[Imagen:AplicacioneWeb1.png]]
 
−
;Es una aplicación que se ejecuta en la web
 
−
</div>
 
  
−
<!--16----------------------------------------------------->
+
===Aplicaciones Web===
−
<div class="slide">
+
−
;La Web
+
−
{{IDevice
+
−
|theme=Line
+
−
|type=Key points
+
−
|title=La Web : WWW
+
−
|body=WWW Word Wide Web {{Definicion|;el sistema de documentos de hipertexto que se encuentran enlazados entre sí y a los que se accede por medio de Internet. A través de un software conocido como navegador, los usuarios pueden visualizar diversos sitios web (los cuales contienen texto, imágenes, videos y otros contenidos multimedia) y navegar a través de ellos mediante los hipervínculos.
+
−
Lee todo en: Qué significa WWW - Definición, Qué es y Concepto http://definicion.de/www/#ixzz4LCeMtP5L}}
+
−
}}
+
−
}}
+
 
</div>
 
</div>
 +
{{AplicacionesWeb}}
  
  
−
<!--17----------------------------------------------------->
 
−
<div class="slide">
 
  
−
*En la imagen vemos una serie de elementos
+
<!--21---------------------------------------------------->
−
#Un entorno de  cliente.
+
−
#Un entorno  de servidor.
+
−
#Una parte de comunicaciones y protocolo.
+
−
</div>
+
−
 
+
−
<!--18---------------------------------------------------->
+
 
<div class="slide">
 
<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">
 
<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]===
 
===El comando [http://es.wikipedia.org/wiki/CURL curl]===
 
*Si no está instalado se instala fácil
 
*Si no está instalado se instala fácil
Línea 320: Línea 244:
 
<div class="slide">
 
<div class="slide">
 
;Curl
 
;Curl
 +
*Con este comando podemos establecer comunicación con servidores usando los diferentes protocolos que soporta.
 
*Usando la sintaxis URL podemos transferir ficheros entre cliente y servidor.
 
*Usando la sintaxis URL podemos transferir ficheros entre cliente y servidor.
 
*Veamos algún uso que puede resultar interesante
 
*Veamos algún uso que puede resultar interesante
Línea 329: Línea 254:
 
<div class="slide">
 
<div class="slide">
 
Ejemplos de uso del comando
 
Ejemplos de uso del comando
−
*Ver el contenido de una página wqeb
+
*Ver el contenido de una página web
 
  '''''curl url_página_web'''''  
 
  '''''curl url_página_web'''''  
 
*Guardar una página web en un fichero  '''''-o'''''
 
*Guardar una página web en un fichero  '''''-o'''''
Línea 339: Línea 264:
 
<!--13---------------------------------------------------->
 
<!--13---------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
−
 
+
;Curl
 
*Si la web nos redirige, hay que especificarlo con '''''-L'''''
 
*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
 
  '''''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
 
*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.
 
*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
+
  Estos conceptos ya los veremos y utilizaremos más adelante
 
</div>
 
</div>
 
<!--13---------------------------------------------------->
 
<!--13---------------------------------------------------->
 
<div class="slide">
 
<div class="slide">
  
−
{{Actividad|
+
{{MRM_Actividad|
 
Investiga y explica al menos 3 opciones del comando curl, pudiendo ser las vistas anteriormente}}
 
Investiga y explica al menos 3 opciones del comando curl, pudiendo ser las vistas anteriormente}}
 
</div>
 
</div>
  
−
 
−
 
 
|}
 
|}

Última revisión de 10:21 14 sep 2020


DWES TituloTema1B.gif



CONCEPTOS SOBRE DESARROLLO WEB


Qué pretende explicar este módulo

  • El objetivo de este módulo lo describe su propio nombre.


Icon objectives.jpg
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.
Partes a analizar
  1. Desarrollar una aplicación
  2. Aplicaciones Web
  3. Entorno servidor
Dwes 1.png

Desarrollar una aplicación


Icon preknowledge.gif
Conocimiento previo
Qué es Desarrollar una aplicación


  • Son muchas las posibles respuestas, pero al menos deberíamos saber dar una de forma correcta



Icon activity.jpg
Actividad
Intenta dar una definición de qué es desarrollar una aplicación, aporta ideas



Posible definición


Icon define.gif
Definición
  • Dado un problema de naturaleza lógica


Icon define.gif
Desarrollar una aplicación consiten en:
  • Implementar o construir un programa,
  • usando un determinado lenguaje de programación.
  • Dicho programa consiste en un conjunto de instrucciones,




Icon define.gif
Definición


Icon define.gif
Definición
  • que ejecutadas en un entorno computacional,
  • solucionan de forma automatizada el problema planteado.



}}


  • Para desarrollar una aplicación o programa
  1. Hay que entenderlo muy bién lo que queremos hacer
  2. Hay que planificarlo
  3. Hay qu realizar esa planificación y probarla
  • Observa la siguiente imagen que reune diferentes la consecuencia de diferentes mitos en el desarrollo.
DesarrolloAplicaciones.jpg
Desarrolar una aplicación
  • Cuando decimos implementar nos referimos a :
  1. Analizar el problema.
  2. Diseñar una solución algorítmica válida.
  3. Escribir el código de dicha solución utilizando uno o varios lenguajes de programación concreto, interpretados o complilados.


Fases en el desarrollo tradicional

AnalisisDiseñoImple1.png:


Icon activity.jpg
Actividad
Realizar la aplicación Ecuaciones de segundo grado con este esquema



  • Observa la siguiente imagen.
  • Usando un caso de uso un poco personal realizamos este estudio detallado.
Desarrollar una aplicación



Icon qmark.gif
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



Icon preknowledge.gif
Conocimiento previo
Diferencias entre Compilacion Vs Interpretación




Icon qmark.gif
Pregunta
Java es un lenguaje compilado o interpretados


Icon qmark.gif
En un entorno de ejecución web, qué tipo de modelo se debe de usar
  • Un entorno compilado, es mucho más rápido
    • Incorrecto
      • Es más rápido, pero está limitado a un tipo de máquina, no sirve.
    • Correcto
      • Es adaptable a cualquier arquitectura (con el intérprete correcto, claro).
  • Un entorno interpretado, se adapta a cualquier tipo de máquina
    • Correcto
      • Es necesario adaptarse a difentes máquinas
    • Incorrecto
      • Revisa tu respuesta



Una Aplicación Web



Icon preknowledge.gif
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
Tipos de aplicaciones
  1. Aplicaciones de escritorio.
  2. Aplicaciones de ingeniería.
  3. Aplicación de Tiempo real.
  4. Software de Inteligencia artificial.
  5. Software de predicciones metereológicas, cálculo científico.
  6. Aplicaciones de juegos.
  7. Aplicaciones web.
  8. ...
Tipos de sorftware
  • Los diferentes 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.
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
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.



Icon inter.gif
Recursos de la Web




Icon activity.jpg
Framework

Investiga y haz una breve exposición de algún framework que te llame la atención relacionado con la programación web


Aplicaciones Web

25px
La Web : WWW

WWW Word Wide Web


Icon define.gif
Definición
Sistema de documentos de hipertexto (html)
 enlazados entre sí (hipertexto e hipervínculos )
A ellos se puede acceder por medio de Internet (red de tipo Tcp/Ip).
Los Navegadores son un software con el cual los usuarios 
 visualizar diversos sitios web 
  con contenidos de  texto, imágenes, vídeos y otros contenidos multimedia)      
 y navegan a través de ellos mediante los hipervínculos 
 (Pasando de forma transparente para ellos de una página a otra).
Lee todo en: Qué significa WWW - Definición, Qué es y Concepto 
   http://definicion.de/www/#ixzz4LCeMtP5L





Icon key points.gif

Peculiaridades del desarrollo web

  • En una aplicación web, veremos el resultado completo de una ejecución
  • La aplicación nunca se va a detener esperando que le demos un valor
  • En la ejecución web, el servidor recibe la solicitud de ejecución junto con los parámetros o valores de variables para la ejecución
  • Esta es una diferencia fundamental respecto a una aplicación de escritorio


La web y html
El hipertexto e hipervínculo
  • Uno de los principales motivos del éxito de la web es la posibilidad que tienen los usuarios de pasar de una página a otra con un simple click en los enlaces tanto en texto como en otros elementos multimedia, sin ser consciente que están cargando páginas ubicadas posiblemente en difernetes sitios del mundo
HtmlDWES.png



Icon qmark.gif
Pregunta
Qué características tiene una aplicación web


AplicacioneWeb1.png
  • En la imagen vemos una serie de elementos de diferentes:
  1. Un entorno de cliente.
  2. Un entorno de servidor.
  3. Una parte de comunicaciones y protocolos, que incluyen elementos software y hardware.
Entornos en una aplicación web
  • En realidad cada un de estas partes se estudia en sus respectivos módulos en este ciclo.
  1. La parte de cliente la cubren los módulos de Diseño de interfaces y Desarrollo de aplicaciones web en entorno cliente
  2. La parte de comunicaciones y protocolo y algo de aplicaciones del servidor en el entorno del servidor se cubre en el módulo de despliegue web.
  3. La parte del entorno servidor la cubrimos en este módulo: Desarrollo de aplicaciones web en entorno servidor.
  • Lógicamente una aplicación web a de tener cada una de esas partes
  • Nosotros vamos a trabajar la parte del entorno servidor; necesitaremos usar html y configuración de apache.
  • Por lo tanto usaremos conceptos que veréis en otros módulos.
ServidorWebVsCliente.jpg
Funcionamos con un cliente que solicita y un servidor que entrega
  • El cliente es el navegador (una aplicación ejecutándose en una máquina con una ip) que solicita un recurso (generalmente una página web)
  • El servidor es una aplicación (puede ser apache) ejecutándose en una máquina que atiende a las solicitudes que entran por un puerto y entregan el recurso solicitado.
  • Las aplicaciones Web usan una arquitectura Cliente/Servidor
  • Está basada en la idea del servicio
  • El servidor es un software ejecutándose en una máquina escuchando a que le soliciten un servicio
  • El cliente inicia el proceso solicitando un servicio a un servidor
  • Posteriormente veremos la arquitectura web desde el punto de vista de la construcción
ClienteServidorDWES.jpg



Icon casestudy.gif
Ejemplo escenario web
Piensa en el escenario de una cafetería
  1. EL servidor: El camarero
  2. Cliente una mujer que entra en el bar
  3. Recurso: Pide un café
  4. Acción: El cliente se lo entrega



Icon casestudy.gif
Ejemplo escenario web
No siempre se entrega lo solicitado

1.- Por que no existe

  1. Recurso: Pide un kilo de carne
  2. Acción: El servidor (camarero) le dice que no tiene ese recurso



Icon casestudy.gif
Ejemplo escenario web

2.- Por que no se tienen permisos

  1. Cliente: un niño de 5 años
  2. Recurso: Pide una cerveza
  3. Acción: El servidor (camarero) le dice que no tiene permisos



Icon casestudy.gif
Ejemplo escenario web

3.- Por que el servidor no está

  1. Cliente: pido un café (recurso existente)
  2. Recurso: Café
  3. Acción: El servidor se ha tenido que ir, no está disponible, hay un cartel de fuera de servicio....


AplicacionWeb.png

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.


Icon activity.jpg
Proceso cliente/servidor
  1. La comunicación entre ambos componentes se lleva a cabo a través del intercambio de mensajes.
  2. El cliente, a través de un navegador, inicia el intercambio de información, solicitando datos al servidor.





Icon activity.jpg
Proceso cliente/servidor

3.- El servidor responde enviando uno o más flujos de datos al cliente



  • En el cliente necesitamos tener una serie de elementos

ArquitecturaClienteServidor.png

Elementos del cliente
  1. 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).
    1. El inicio también lo puede hacer un robot también conocidos como spiders, crawlers, arañas, bots o Indexadores.
  2. Necesitamos encontrar la ip de la máquina a partir de su nombre (DNS)
  3. Interpretar y visualizar la información que el servidor nos facilite en formato html (El navegador).
Elementos del cliente
  1. 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.
  2. Cargar las hojas de estilo, renderizar imágenes y la página según especificaciones de las etiquetas del fichero html.

Especificando 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
UrlDWES1.png
  • 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 fragmento representa una parte concreta de la página que se solicita,
  • Para el fragmento se utiliza el método GET dentro del protocolo http.
Ejemplo de direcciones
  1. Usando fragmento 
protcolo://maquina/ruta/recurso/fragmento
http://www.unizar.es/deiss/notas.html#primerCurso
  1. Usando solicitud 
protcolo://maquina/ruta/recurso/solicitud
http://www.unizar.es/deiss/notas.htmll?nombre="Manuel"&modulo="DWES"
Ejemplo de direcciones
  1. 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

Cómo son los programas que permiten que una red funcione

  • Una comunicación entre dos equipos no es el resultado de ejecutar un sólo programa (solución monolítica), sino que son varios programas que interactúan
  • Podemos ver como hay una serie de programas divididos en niveles, siendo cada nivel, una parte del proceso de comunicaciones entre dos partes.

Niveles Tcp ip.png

Qué es la ip

  • Dentro del nivel de red tenemos el protocolo IP
  • Su función principal es localizar la red donde está el equipo destino
  • En su configuración aparece el número IP que es el identificador único que tienen un nodo dentro de la red de tipo TCP/IP o red de Internet

Qué es el puerto

  • En el nivel de transporte tenemos los protocolos UDP y TCP
  • Su función principal es localizar la aplicación a la cual va a ir destinada la comunicación o datos
  • Se hace a través de un número que se conoce como el nombre puerto


Algunos comandos importantes

ifconfig (ipconfig en windows) para saber la ip que tengo asignada
ping para enviar un saludo a algún nodo con el objetivo de saber si está conectado
route para conocer mis rutas y la ip de mi router más próximo (mi gateway que enruta)
tracert para conocer la traza de rutas o ip's que sigue un paquete en una transmisión

Los medios físicos y lógicos del proceso web

  • Aparte de la comunicación física necesitamos unos protocolos
  • Protocolos de la familia tcp/ip.

ProtocoloTcpIpDWES.jpg


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).



Icon qmark.gif
Pregunta

¿Podemos visualizar una página web sin que intervenga un servidor web?



Icon activity.jpg
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, ...)



Servidor web

  • Un servidor web es una aplicación que se ejecuta en una máquina como un servicio y se mantiene escuchando por un determinado puerto
  • Los más populares son :
  1. Apache HTTP Server
  2. Microsoft IIS (Internet Information Services)
  3. NGINX
  4. Lighttpd
  5. Sun Java System Web Server
Servidor Web



Icon activity.jpg
Actividad
Ejercicio: Investiga las características y diferencias de cada uno de

éstos servidores web: plataforma en la que se ejecutan, lenguajes de programación que interpretan, propietario, etc.




El comando curl

  • Si no está instalado se instala fácil 
  sudo apt-get install curl
  • Con este comando podemos establecer comunicación con servidores usando los diferentes protocolos que soporta.
Curl
  • Con este comando podemos establecer comunicación con servidores usando los diferentes protocolos que soporta.
  • Usando la sintaxis URL podemos transferir ficheros entre cliente y servidor.
  • Veamos algún uso que puede resultar interesante
  • Suele ser interesante conocer los códigos http
  • Nos interesará conocer los códigos del servidor 5xx

Ejemplos de uso del comando

  • Ver el contenido de una página web 
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
Curl
  • 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 más adelante



Icon activity.jpg
Actividad

Investiga y explica al menos 3 opciones del comando curl, pudiendo ser las vistas anteriormente