Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/algoritmica/programacionWeb»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «{{Usuario:ManuelRomero/JavaScript/algoritmica/nav}} __NOTOC__»)
 
 
(6 revisiones intermedias por el mismo usuario no mostrado)
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:appWeb.png|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é es un desarrollo web===
 +
*Un desarrollo web consiste en hacer una aplicación que el usuario la va a ejecutar en un entorno web
 +
*A la hora de desarrolla aplicaciones web, son diferentes las tecnologías que intervienen
 +
;Html
 +
;CSS
 +
;Lenguaje en el cliente
 +
;Lenguaje en el servidor
 +
;Servidores web o servidores de aplicaciones
 +
;La red
 +
;Otros elementos o plugins a incorporar
 +
 +
 +
 +
<!--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>
 +
 +
 +
<!--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'''''}}
 +
{{Actividad|Proponer lenguajes que conozcamos y ver si son compilados o interpretados}}
 +
;Es una forma de acercarnos a la programación en general y en particular a la programación web
 +
;Por curiosidad hay un lenguaje de programación especial llamado Java
 +
{{Pregunta|Qué es Java? ¿Es java interpretado o compilado?  }}
 +
</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>
 +
 +
<!--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 es importante estudiarlas para poder realizar un desarrollo web.
 +
#La parte de '''cliente''' es la que vamos a cubrir o estais ya cubriendo en este curso
 +
#La parte de '''comunicaciones y protocolo''' y algo de aplicaciones del servidor  la vais a ver un poco con Nacho en la siguiente unidad formativa.
 +
#La parte del '''entorno servidor''' Veremos un poco al final de esta unidad formativa con la intención de que tengáis una visión global del desarrollo web.
 +
</div>
 +
 +
<!--19---------------------------------------------------->
 +
<div class="slide">
 +
*Lógicamente una aplicación web a de tener cada una de esas partes
 +
[[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:puerto/ruta/recurso/'''
 +
'''''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">
 +
 +
|}

Última revisión de 17:54 18 mar 2016



AppWeb.png




CONCEPTOS SOBRE DESARROLLO WEB


Qué es un desarrollo web

  • Un desarrollo web consiste en hacer una aplicación que el usuario la va a ejecutar en un entorno web
  • A la hora de desarrolla aplicaciones web, son diferentes las tecnologías que intervienen
Html
CSS
Lenguaje en el cliente
Lenguaje en el servidor
Servidores web o servidores de aplicaciones
La red
Otros elementos o plugins a incorporar


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

Vamos a dar una definición entre todos. Aportar ideas




Posible definición


Icon define.gif

Definición

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



DesarrollarAplicacion.png
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, interpretables o complilables.


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 activity.jpg

Actividad

Proponer lenguajes que conozcamos y ver si son compilados o interpretados



Es una forma de acercarnos a la programación en general y en particular a la programación web
Por curiosidad hay un lenguaje de programación especial llamado Java



Icon qmark.gif

Pregunta

Qué es Java? ¿Es java interpretado o compilado?





Icon qmark.gif

Pregunta

En un entorno de ejecución web, qué tipo de modelo se debe de usar y por qué


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

Pregunta

Qué carácterísticas tiene una apliación web


AplicacioneWeb1.png

  • En la imagen vemos una serie de elementos
  1. Un entorno de cliente.
  2. Un entorno de servidor.
  3. Una parte de comunicaciones y protocolo.
Entornos en una aplicación web
  • En realidad cada un de estas partes es importante estudiarlas para poder realizar un desarrollo web.
  1. La parte de cliente es la que vamos a cubrir o estais ya cubriendo en este curso
  2. La parte de comunicaciones y protocolo y algo de aplicaciones del servidor la vais a ver un poco con Nacho en la siguiente unidad formativa.
  3. La parte del entorno servidor Veremos un poco al final de esta unidad formativa con la intención de que tengáis una visión global del desarrollo web.
  • Lógicamente una aplicación web a de tener cada una de esas partes

ServidorWebVsCliente.jpg

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

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
  • 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.
  • 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"
  1. Usando el puerto 
protcolo://maquina:puerto/ruta/recurso/

http://www.unizar.es:80/

  • Si se elude alguna parte se toma el valor por defecto o lo que establezca el servidor web

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.

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