Última revisión de 18:53 5 oct 2015

Contenido

1 Aplicaciones Web
2 Puntos clave
3 Ejemplo
- 3.1 Aplicaciones Web Vs Escritorio
- 3.2 Conceptos a tener claros para desarrollo web
- 3.3 Organizando conceptos
4 Pregunta
- 4.1 Herramientas para desarrollar
5 Pregunta
- 5.1 Back-end y front-end de una aplicación web
- 5.2 Programación en el servidor y en cliente
6 Puntos clave
7 Pregunta
8 Puntos clave
9 Pregunta
10 Puntos clave
- 10.1 Tecnologías y Arquitectura web
11 Recursos de la Web
12 Actividad
- 12.1 Tecnologías para programación web del lado del servidor
- 12.2 Componentes de una aplicación web en el servidor
- 12.3 La arquitectura de la aplicación
13 Recursos de la Web
- 13.1 Instalación de herramientas
- 13.2 Instalando Apache
14 Actividad
15 Puntos clave
16 Actividad
17 Puntos clave
18 Actividad
- 18.1 Instalando Mysql
19 Actividad
- 19.1 Instalando php
20 Actividad
- 20.1 Instalando Netbeans
- 20.2 Instalar netbeans
- 20.3 Instalando phpmyadmin
- 20.4 Montando nuestra arquitectura Instalar Apache php y MySql
- 20.5 Instalar xdebug

Aplicaciones Web

Las aplicaciones web emplean páginas web dinámicas para crear aplicaciones.
Estas aplicaciones se ejecuten en un servidor web y se muestren en un navegador.

Puntos clave

Lo que muestra el navegador es una página web, resultado de la ejecución de un programa en el servidor

Aplicaciones Web

El hecho de que la página sea dinámica, hace referencia a que la página se crea una vez que se solicita, no se entrega una página previamente hecha.

	Ejemplo
	Vamos a comer: un menú fijo (página estática), o comemos a la carta (página dinámica).

Una Aplicación Web, funcionalmente puede hacer lo mismo que una aplicación de escritorio
La Aplicación Web, la puedo ejecutar desde cualquier ubicación.

Aplicaciones Web Vs Escritorio

Las diferencias entre una aplicación web y una de escritorio tiene ventajas e inconvenientes.

Ventajas de las aplicaciones web: No es necesario instalarlas en aquellos equipos en que se vayan a utilizar.; Se instalan y se ejecutan solamente en un equipo, en el servidor.; Esto permite uso simultáneo en diferentes equipos.; Centralización de la gestión: hacer copias de seguridad de los datos, corrección de errores, actualización.

Ventajas de las aplicaciones Web: Independiencia del sistema operativo y de la arquitectura de la máquina (procesador, potencia, ...); Generalmente el cuello de botella lo presenta el equipo, no la máquina.; Se pueden utilizar desde cualquier lugar en el que dispongamos de conexión con el servidor.

Inconvenientes

El interface de usuario de las aplicaciones web es la página que se muestra en el navegador.

Esto restringe las características del interface a aquellas de una página web.

Dependemos de una conexión con el servidor para poder utilizarlas.

Si nos falla la conexión, no podremos acceder a la aplicación web.

Inconvenientes

La información que se muestra en el navegador debe transmitirse desde el servidor.

Esto hace que cierto tipo de aplicaciones no sean adecuadas para su implementación.

Por ejemplo, las aplicaciones que manejan contenido multimedia, como las de edición de vídeo.

Al viajar la información por la red, existe un problema extra de seguridad.

Conceptos a tener claros para desarrollo web

Framework
Gestores de contenidos
Plataforma de desarrollo
Tecnología
Arquitectura Web

No todos los conceptos hacen referenica al lenguaje de programación a utilizar
Son terminologías relacionadas con el desarrollo web

Organizando conceptos

A la hora de empezar a desarrollar, hay que tomar unas decisiones previas

Pregunta

Qué programación, Servidor Web, Gestor de Bases de datos voy a usar?

Organizando conceptos

Esto tiene que ver con

Arquitectura
Plataforma de desarrollo
Tecnología

Arquitectura Web

Herramientas para desarrollar

Framework
Gestor de contenidos CSM

Pregunta

¿Framework o _Gestores de contenidos?

http://www.web-and-development.com/a-framework-or-a-cms-what-is-better-to-choose/

Herramientas para desarrollar

Framework

Filosofía de programa tus programas, no tus aplicaciones
Habla de dónde hay que dedicar esfuerzos
Una herramienta compuesta por una serie de librerías que nos da un enfoque y una forma de cómo solucionar un problema
Organiza la forma de desarrollo

Framework

Establece unos criterios que unifica la manera de desarrollar
- Estructura de carpetas
- Gestion de la base de datos
- Automatización de muchas tareas (Autentificación, Cookies, Gestion de la base de datos, Seguridad
- Permiten un mantenimiento

Gestores de contenidos

Son herramientas que permiten desarrollar contenidos
Por ejemplo Drupal, Joomla, Wrodpress y otras muchas.
En ellas siempre vemos dos partes bien diferenciadas:

Una parte externa o front-end, que es el conjunto de páginas que ven los usuarios.
Una parte interna o back-end, que es otro conjunto de páginas dinámicas
1. Normalmente son las que usan las personas que producen el contenido
2. Administrar la aplicación web permitiendo a usuarios con permisos acceder a contenidos.

Back-end y front-end de una aplicación web

Una aplicación web normalmente se divide en dos partes

un front-end, que es la parte pública que ven los usuarios externos; (La página html)
un back-end, que es la parte privada que usan los administradores de la aplicación. (Los programa en servidor, bd,...)

Programación en el servidor y en cliente

Ya hemos dejado hablado un poco de estas dos tecnologías

Puntos clave

El cliente se ejecuta en el navegador

El código a ejecutar viene embebido en forma de script en la página que el servidor nos entrega.
Este script en principio no puede directamente acceder a los datos que tengamos en el servidor

Programación en el servidor y en cliente

Pregunta

Si quiero verificar que la contraseña introducida en una página web tenga una longitud mínima, ¿dónde sería preferible que se ejecutara el código de comprobación?

El servidor ejecuta código y genera páginas html que entrega al cliente

El cliente nunca ve este código
El servidor accede (si es necesario) a la información que tenemos en la base de datos
El servidor responde a una solicitud del cliente y le entrega una página html
No se puede pensar que el cliente necesita un dato y se lo pide al servidor y este se lo entrega.
Lo que entrega es una págian html. Esto debe quedar muy claro

Puntos clave

El servidor ante una solicitud del cliente entrega una página html

AJAX Al rescate

Pregunta

¿Qué pasa cuando el cliente solo quiere un dato del servidor para actualziar la página que actual?
¿y si en un momento dado, sólo pretendemos almacenar algo y qudarnos como estamos?

Desde hace unos años existe una técnica de desarrollo web conocida como AJAX.
Esta tecnología nos posibilita realizar programas en los que el código JavaScript accede al servidor
se puede comunicar y obtener información con la que, por ejemplo, modificar la página web actual.

AJAX al rescate

Es importante tener en cuenta que esta comunicación es asíncrona (no sabemos exactamente cuando se va a producir la comunicación)

Puntos clave

Ajax permite sin salir de una página modificar su contenido en base a la información que se almacena en un servidor de Internet

Tecnologías y Arquitectura web

Tiene que ver con las herramientas o programas a utilizar tanto para desarrollar y como para dar servicios

Recursos de la Web

Tecnología y Arquitectura web

Nosotros de momento usaremos la arquitectura de tipo LAMP (Linux Apache Mysql Php)
Existen otras arquitecturas para desarrollar. Consiste en hacer convinacinoes de SO. Serivdor Web, Gestor de Bases de Datos, Lenguaje de programacion para el desarrollo).

Actividad

Localiza al menos 2 Arquitecturas diferentes

Tecnologías para programación web del lado del servidor

Cuando programas una aplicación, utilizas un lenguaje de programación.
Por ejemplo, utilizas el lenguaje Java para crear aplicaciones que se ejecuten en distintos sistemas operativos.
Al programar cada aplicación utilizas ciertas herramientas como un entorno de desarrollo o librerías de código. *Además, una vez acabado su desarrollo, esa aplicación necesitará ciertos componentes para su ejecución.
Por ejemplo en el caso de javauna máquina virtual de Java.
Son consideraciones a tener en cuenta antes de empezar a desarrollar.

Componentes de una aplicación web en el servidor

1.-Un servidor web para recibir las peticiones de los clientes web
- Suelen ser los navegadores. Reciben la página que solicitan
- El servidor web debe conocer el procedimiento a seguir para generar la página web:

Para ello tendrá módulos encargados de la ejecución del código y cómo se debe comunicar con él.

Componentes de una aplicación web en el servidor

2.-El módulo encargado de ejecutar el código o programa.
- genera la página web resultante.
- Este módulo debe integrarse de alguna forma con el servidor web
- Dependerá del lenguaje y tecnología que utilicemos para programar la aplicación web.
3.- Un gestor de base de datos, será un servidor.
- Este módulo no es estrictamente necesario pero se usa casi siempre.
4.-El lenguaje de programación que utilizarás para desarrollar las aplicaciones.

La arquitectura de la aplicación

Además de los componentes a utilizar, también es importante decidir cómo vas a organizar el código de la aplicación.
Esto se conoce como la arquitectura de la aplicación web.
Muchas de las arquitecturas que se usan en la programación de aplicaciones web te ayudan a estructurar el código de las aplicaciones en capas o niveles.
El motivo de dividir en capas el diseño de una aplicación es que se puedan separar las funciones lógicas de la misma, de tal forma que sea posible ejecutar cada una en un servidor distinto (en caso de que sea necesario).

Arquitectura de la aplicacion

Un servidor de aplicaciones web en realidad puede estar formado por varios servidores físicos;

cada servidor se puede encargar de ejecutar una parte de la aplicación.

Internamente se puede dividir la funcionalidad de una aplicación web en3 capas (Cliente, Sevidor, BD).

Arquitectura de tres capas

capa de acceso a datos: que se tendrá que encargar de almacenar la información de la aplicación en una base de datos y recuperarla cuando sea necesario.
capa intermedia : donde deberás programar la funcionalidad de tu aplicación.
capa cliente: que es donde programarás todo lo relacionado con el interface de usuario, esto es, la parte visible de la aplicación con la que interactuará el usuario.

Dentro de la arquitectura de la aplicacion podemos ver tambíen arquitectura MVC (nivel de tres capas), o arquitectura de modelo Vista - Aplicacion o modelo de dos capas.
Este tema lo estudiaremos posteriormente.

Recursos de la Web

Qué es una aplicación web en wikipedia
Qué es un desarrollo web en http://es.wikipedia.org/wiki/Desarrollo_web wikipedia]
Que es una URL vs diferencia con URI http://www.hispamedios.com/articles/id34-url-y-uri URI]

Instalación de herramientas

Las herramientas que vamos a necesitar para desarrollar son las siguietnes

Apache como servidor Web
Mysql como gestor de bases de datos relacional
PHP como lenguaje de programación en el servidor
HTML como páginas
http como protocolo de comunicaciones
Netbeans como EDI de desarrollo. Alternativamente se puede usar Sublime u otros (Mejor usar todos el mismo

Instalando Apache

Página oficial de apache http://httpd.apache.org/

 apt-get install apache2

Directorio donde se ubica todo

/etc/apache2

Modificando directivas de configuración

Cada sitio web puede tener su propia configuracion dentro de nuestro servidor

/etc/apache2/sites_available/

En este directorio tendremos un fichero de configuración por sitio web.
Se cargarán aquellos cuyo enlace simbólico esté en el directorio /etc/apache2/sites_enable/

ln -s fichero_origen_a_enlazar fichero_destino_que_es_enlace_simbolico

Modificando directivas de configuración

Actividad

Localizamos el fichero de configuración del sitio web por defecto

/etc/apache2/sites_avaible/000-default.conf

Modificamos el DocumentRoot al directorio /var/www

Puntos clave

Fichero de configuracion
Sitio web por defecto
Directiva DocumentRoot
Directiva ServerName
Directiva <Directory> ... </Directory>

Actividad

Probamos a ver si responde nuestro servidor web y Vemos el fichero de configuración

Para parar y arrancar un servicio en linux se puede hacer

sudo service nombre_del_servicio start|stop|restart|status

 sudo service apache2 restart

Propietarios de ficheros y procesos

Apache es un proceso propiedad del usuario www-data que está en el grupo www-data
Para cambiar el propietario de un fichero se usa el comando

 sudo chown usuario:grupo fichero

Controlando errores

Es muy importante conocer la ubicación del fichero donde se identifican los errores según se producen por parte del servidor
Muchas veces va a ser nuestro única forma de saber por qué algo está fallando

Puntos clave

Fichero de errores /var/log/apache/error.log
Recuerda el comando sudo tail -f error.log(mantiene el fichero abierto y actualizado)

Existen otros modulos y extensiones de apache que ya instalaremos cuando necesitemos.

Actividad

Intenta tener en local un sitio web llamado www.tuNombre.daw.com
Que se cargue una página web llamada 1.html ubicada por defecto en tu home/web (crea previamente el directorio
Explica en todos los pasos realizados

Instalando Mysql

Página oficial de apache http://www.mysql.com/

Hay que diferenciar en la instalación de mysql servidor y mysql cliente
Instalamos los dos programas

 sudo apt-get install mysql-server mysql-client

Directorio donde se ubica todo

/etc/mysql

fichero de configuración

/etc/mysql/my.cnf

Durante la instalación nos pedirá la contraseña de root
de forma totalmente antisegura introducimos root/root
En caso de perder la password probamos a entrar sin password y modificarla
- Si nos queremos conectar a MYSQL sin necesidad de usuario y password:

   mysql --defaults-file=/etc/mysql/debian.cnf

Reiniciar pass del "root" de MySQL (si lo hemos perdido):

  mysql --defaults-file=/etc/mysql/debian.cnf mysql
  mysql> update user set Password=password('password_nuevo') where User='root';
  mysql> flush privileges;

Probamos a entrar y que funciona bien

 mysql -u root -p
 '''insertamos la password'''
 show databases:
 
 use my_baseDatos;  
 
 SELECT database();

Hay que recordar comandos básicos de mysql
uno muy útil es la ayuda

 mysql -u root -proot
  ......
 mysql> help
 //salen todos los comandos

Referencia en la página oficial http://dev.mysql.com/doc/
Otra referencias web en plan de tutoriales

Actividad

Creamos una tabla e insertamos filas. Luego verificamos todo

Instalando php

Página oficial de php http://www.php.net/
Está página la consultaremos mucho

Ahora debemos instalar el módulo de php para apache
Se trata de que el servidor web sepa ejecutar fichero php

 sudo apt-get install php5 libapache2-mod-php5

Directorio donde se ubica todo

/etc/php5

fichero de configuración de php para apache

/etc/php5/apache2/php.ini

Debemos restaurar el servicio para que los cambios tengan efecto en el servidor web

/etc/init.d/apache2 restart

Actividad

Localiza el fichero de configuracion de php: php.ini
Analiza el valor y significado de las siguientes directivas

short_open_tags
max_execution_time
error_reporting
file_upload
upload_max_filesize

Instalando Netbeans

Instalando Netbeans

Primero debemos ver si tenemos instalado java

 java -version

Nos dirá la versión que actualmente tenemos instalada o que no lo tenemos.
En caso de no tenerla lo instalamos, podemos seguir esta guia
jdk, jre, jvm
Primero instamalos el jre

sudo apt-get install icedtea-7-plugin openjdk-7-jre

Luego el jdk

sudo apt-get install openjdk-7-jdk

Ahora verificamos la instalación

# java -version
java version "1.7.0_65"
OpenJDK Runtime Environment (IcedTea 2.5.2) (7u65-2.5.2-3~14.04)
OpenJDK 64-Bit Server VM (build 24.65-b04, mixed mode)

Instalar netbeans

Descargamos la última versión

https://netbeans.org/downloads/

No tiene ningún misterio la instalación
Debemos comprobar nuestro equipo sea de 64 bits o de 32

# uname -a

Otra forma de ver información del sistema

 lsb_release -a

Seleccionamos la descarga de php y la máquina virtual de java por si no la tuviéramos instalada

Accedemos al fichero descargado
Le damos permiso de ejecución y ejecutamos dicho fichero

chmod +x jdk-8u20-nb-8_0_1-linux-x64.sh 
./jdk-8u20-nb-8_0_1-linux-x64.sh

Una vez instalado se puede ejecutar y no hace falta modificar ningún parámetro

Instalando phpmyadmin

Este es un programa php que me va a permitir seguir de forma gráfica la base de datos
Podemos hacer una gestión con interfaz gráfica

   sudo apt-get install phpmyadmin

Una vez instalado puede ser que tengamos que hacer un enlace simbólico en nuestro DocumentRoot
Suponiendo que lo haya instalado todo en /etc/php5/phpmyadmin, y que nuestro DocuemntRoot apunte a /var/www

 ln -s /etc/php5/phpmysqmin /var/www/phpmyadmin

Montando nuestra arquitectura Instalar Apache php y MySql

El proceso de instalación se puede hacer siquiendo la instalacion lamp

http://www.howtoforge.com/installing-apache2-with-php5-and-mysql-support-on-ubuntu-12.04-lts-lamp

Instalar xdebug

Es una herramienta que nos va a permitir debugar nuestras aplicaciones php
Podemos consultar la pagina de netbeans para la informacion

https://netbeans.org/kb/docs/php/configure-php-environment-ubuntu.html#xdebug-package

sudo apt-get install php5-dev php-pear

 sudo pecl install xdebug

A continuacion debemos modificar el fichero ini de php
Abrimos con nuestro editor el fichero

 sudo vim /etc/php5/apache2/php.ini .

Añadimos el módulo de xdebug a la variable zend_extenxion de php

zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
xdebug.remote_enable=on

@@ Línea 1: / Línea 1: @@
-__NOEDITSECTION__
+<!--__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;" |
@@ Línea 6: / Línea 6: @@
 <span style="background:#FFFF99">
 </span>
-[[Imagen:DWES_TituloTema1B.gif|center]]
+[[Imagen:DWES_TituloTema2.gif|center]]
 |}
@@ Línea 15: / Línea 15: @@
 <div class="slides layout-regular template-default">
+<div class="slide">
+<!--1-->
+===Aplicaciones Web===
+*Las aplicaciones web emplean '''páginas web''' '''''dinámicas''''' para crear aplicaciones.
+*Estas aplicaciones se ejecuten en un '''''servidor web''''' y se muestren en un '''''navegador'''''.
+{{Puntos clave|Lo que muestra el navegador es una página web, resultado de la ejecución de un programa en el servidor}}
+</div>
-<!--2------------------------------------------------------>
 <div class="slide">
-===CONCEPTOS SOBRE DESARROLLO WEB===
+<!--2-->
+;Aplicaciones Web
+*El hecho de que la página sea dinámica, hace referencia a que la página se crea una vez que se solicita, no se entrega una página previamente hecha.
+[[Imagen:comparativaEstaticaDinamica.png|center]]
+{{Ejemplo|Vamos a comer:  un menú fijo (página estática), o comemos a la carta (página dinámica).}}
 </div>
+<div class="slide">
+<!--3-->
+*Una '''''Aplicación Web''''',  funcionalmente puede hacer lo mismo que una aplicación de escritorio
+*La Aplicación Web,  la puedo ejecutar desde cualquier ubicación.
+[[Imagen:distribucionAplicacionesWeb.png|center|250px]]
+</div>
-<!--3------------------------------------------------------>
 <div class="slide">
-===Que pretende explicar este módulo===
+<!--3-->
-*El objetivo de este módulo se describe en el nombre que tiene.
+===Aplicaciones Web Vs Escritorio===
-{{Objetivo|'''''Desarrollo de aplicaciónes web en entorno servidor'''''}}
+*Las diferencias entre una aplicación web y una de escritorio tiene ventajas e inconvenientes.
-*En esta introducción analizaremos qué entendemos por '''''Desarrollo de aplicaciones web en el entorno servidor'''''.
+;Ventajas de las aplicaciones web:
-*Para ello vamos a  ir desgranando el nombre del módulo y analizándolo en cada una de sus partes.
+:No es necesario instalarlas en aquellos equipos en que se vayan a utilizar.
+:Se instalan y se ejecutan solamente en un equipo, en el servidor.
+:Esto permite uso simultáneo en diferentes equipos.
+:Centralización de la gestión: hacer copias de seguridad de los datos, corrección de  errores, actualización.
 </div>
-<!--4------------------------------------------------------>
 <div class="slide">
+<!--3-->
+;Ventajas de las aplicaciones Web
+:Independiencia del sistema operativo y de la arquitectura de la  máquina (procesador, potencia, ...)
+:Generalmente el cuello de botella lo presenta el equipo, no la máquina.
+:Se pueden utilizar desde cualquier lugar en el que dispongamos de conexión con el servidor.
+[[Imagen:ventajas.png|center|350px]]
+</div>
-;Partes a analizar
+<div class="slide">
-#Desarrollar una aplicación
+<!--3-->
-#Aplicaciones Web
+;Inconvenientes
-#Entorno servidor
+:El interface de usuario de las aplicaciones web es la página que se muestra en el navegador.
-[[Imagen:Dwes_1.png|center]]
+::Esto restringe las características del interface a aquellas de una página web.
+:Dependemos de una conexión con el servidor para poder utilizarlas.
+::Si nos falla la conexión, no podremos acceder a la aplicación web.
+[[Imagen:inconvenientes.png|center|350px]]
 </div>
-<!--5--------------------------------------------------->
 <div class="slide">
-===Desarrollar una aplicación===
+<!--3-->
-<hr/>
+;Inconvenientes
-{{Conocimiento previo|Qué es '''''Desarrollar una aplicación'''''}}
+:La información que se muestra en el navegador debe transmitirse desde el servidor.
-*Son muchas las posibles respuestas, pero al menos deberíamos saber dar una de forma correcta
+::Esto hace que cierto tipo de aplicaciones no sean adecuadas para su implementación.
-{{Actividad|aportar dicha definición por parte de grupos de alumnos}}
+::Por ejemplo, las aplicaciones que manejan contenido multimedia, como las de edición de vídeo.
+:Al viajar la información por la red, existe un problema extra de seguridad.
 </div>
+<div class="slide">
+<!--3-->
+===Conceptos a tener claros para desarrollo web===
+#Framework
+#Gestores de contenidos
+#Plataforma de desarrollo
+#Tecnología
+#Arquitectura Web
+*No todos los conceptos hacen referenica al lenguaje de programación a utilizar
+*Son terminologías relacionadas con el desarrollo web
+</div>
-<!--6--------------------------------------------------->
 <div class="slide">
-{{Definicion|
+<!--3-->
-*Dado un problema de naturaleza lógica,
-*desarrollar una aplicación consiste en
+===Organizando conceptos===
-*'''''implementar''''' o construir un programa usando un determinado lenguaje de programación,
+*A la hora de empezar a desarrollar, hay que tomar unas decisiones previas
-*Dicho programa consiste en un conjunto de instrucciones que ejecutadas en un entorno computacional solucionan de forma automatizada el problema planteado.}}
+{{Pregunta|Qué  programación, Servidor Web, Gestor de Bases de datos voy a usar?}}
 </div>
-<!--7--------------------------------------------------->
 <div class="slide">
-;Desarrolar una aplicación
+<!--3-->
-*Cuando decimos '''''implementar''''' nos referimos a :
+;Organizando conceptos
-#'''''Analizar''''' el problema.
+*Esto tiene que ver con
-#'''''Diseñar''''' una solución algorítmica válida.
+#Arquitectura
-#'''''Escribir el código'''''  de dicha solución utilizando uno o varios  lenguajes de programación concreto, interpretables o complilables.
+#Plataforma de desarrollo
+#Tecnología
 </div>
-<!--7--------------------------------------------------->
 <div class="slide">
-;Fases en el desarrollo tradiciona
+<!--3-->
-[[Imagen:AnalisisDiseñoImple1.png]]:
+;Arquitectura Web
+[[Imagen:arquitecturaWeb.png|Center|600px]]
 </div>
+<div class="slide">
+<!--3-->
+===Herramientas para desarrollar===
-<!--8--------------------------------------------------->
+#Framework
+#Gestor de contenidos CSM
+{{Pregunta|¿Framework o _Gestores de contenidos?}}
+*http://www.web-and-development.com/a-framework-or-a-cms-what-is-better-to-choose/
+</div>
 <div class="slide">
-;Desarrollar una aplicación
-{{Pregunta|'''''¿Compilación o interpretación?'''''}}
+;;Herramientas para desarrollar
-*Las instrucciones escritas, de alguna manera han de pasar a código máquina para que se puedan ejecutar en un entorno computacional.
+[[Imagen:frameworkVsCSM.png|center|500px]]
-*Para ello dichas instrucciones pueden '''''Compilarse o Interpretarse'''''
 </div>
-<!--9--------------------------------------------------->
 <div class="slide">
-{{Conocimiento previo|Diferencias entre '''''Compilacion Vs Interpretación'''''}}
+<!--3-->
-{{Pregunta|Java es un lenguaje compilado o interpretados }}
+;Framework
+*Filosofía de programa tus '''''programas''''', no tus '''''aplicaciones'''''
+*Habla de dónde hay que dedicar esfuerzos
+*Una herramienta compuesta por una serie de librerías que nos da un enfoque y una forma de cómo solucionar un problema
+*Organiza la forma de desarrollo
 </div>
-<!--9--------------------------------------------------->
 <div class="slide">
-{{Pregunta|En un entorno de ejecución web, qué tipo de modelo se debe de usar y por qué}}
+;Framework
+*Establece unos criterios que unifica la manera de desarrollar
+**Estructura de carpetas
+**Gestion de la base de datos
+**Automatización de muchas tareas (Autentificación, Cookies, Gestion de la base de datos, Seguridad
+**Permiten un mantenimiento
 </div>
-<!--10----------------------------------------------------->
 <div class="slide">
-===Una Aplicación Web===
+<!--3-->
-<br/>
-{{Conocimiento previo|Qué es una '''''Aplicación Web'''''}}
+;Gestores de contenidos
-*Normalmente en un ordenador vemos un programa o aplicación ejecutándose, con el cual podemos estar interactuando.
+*Son herramientas que permiten desarrollar contenidos
-*No todos los programas o aplicaciones son del mismo tipo, tenemos diferentes tipos de software
+*Por ejemplo Drupal, Joomla, Wrodpress y otras muchas.
+*En ellas siempre vemos  dos partes bien diferenciadas:
+#Una parte externa o front-end, que es el conjunto de páginas que ven los usuarios.
+#Una parte interna o back-end, que es otro conjunto de páginas dinámicas
+##Normalmente son las que usan las personas que producen el contenido
+##Administrar la aplicación web permitiendo a usuarios con permisos acceder a contenidos.
 </div>
-<!--11----------------------------------------------------->
 <div class="slide">
-;Tipos de aplicaciones
+<!--3-->
-#Aplicaciones de escritorio.
+===Back-end y front-end de una aplicación web===
-#Aplicaciones de ingeniería.
+*Una aplicación web normalmente se divide en dos partes
-#Aplicación de Tiempo real.
+#un '''''front-end''''', que es la parte pública que ven los usuarios externos; (La página html)
-#Software de Inteligencia artificial.
+#un '''''back-end''''', que es la parte privada que usan los administradores de la aplicación. (Los programa en servidor, bd,...)
-#Software de predicciones metereológicas, cálculo científico.
-#Aplicaciones de juegos.
-#Aplicaciones web.
-#...
 </div>
-<!--12----------------------------------------------------->
 <div class="slide">
-;Tipos de sorftware
+<!--3-->
-*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.
+===Programación en el servidor y en cliente===
-*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.
+*Ya hemos dejado hablado un poco de estas dos tecnologías
+{{Puntos clave|El cliente se ejecuta  en el navegador}}
+*El código a ejecutar viene embebido en forma de script en la página que el servidor nos entrega.
+*Este script en principio no puede directamente acceder a los datos que tengamos en el servidor
 </div>
-<!--13----------------------------------------------------->
 <div class="slide">
-;Tipos de sorftware
+<!--3-->
-*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.
+;Programación en el servidor y en cliente
-*Son componentes que directamente podemos usar
+{{Pregunta|Si quiero verificar que la contraseña introducida en una página web tenga una longitud mínima, ¿dónde sería preferible que se ejecutara el código de comprobación? }}
 </div>
-<!--14----------------------------------------------------->
 <div class="slide">
-;framework
+<!--3-->
-*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|
+;El servidor ejecuta código y genera páginas html que entrega al cliente
-*[http://www.bestwebframeworks.com/ framework] para el desarrollo web}}
+*El cliente nunca ve este código
+*El servidor accede (si es necesario) a la información  que tenemos en la base de datos
+*El servidor responde a una solicitud del cliente y le entrega una página html
+*No se puede pensar que el cliente necesita un dato y se lo pide al servidor y este se lo entrega.
+*'''''Lo que entrega es una págian html'''''. Esto debe quedar muy claro
 </div>
-<!--16----------------------------------------------------->
 <div class="slide">
-{{Pregunta|Qué carácterísticas tiene una apliación web}}
+<!--3-->
-[[Imagen:AplicacioneWeb1.png]]
+{{Puntos clave| El servidor ante una solicitud del cliente entrega una página html}}
 </div>
-<!--17----------------------------------------------------->
 <div class="slide">
+<!--3-->
-*En la imagen vemos una serie de elementos
+;AJAX Al rescate
-#Un entorno de  cliente.
+{{Pregunta|
-#Un entorno  de servidor.
+#¿Qué pasa cuando el cliente solo quiere un dato del servidor para actualziar la página que actual?
-#Una parte de comunicaciones y protocolo.
+#¿y si en un momento dado, sólo pretendemos almacenar algo y qudarnos como estamos?
+}}
+*Desde hace unos años existe una técnica de desarrollo web conocida como AJAX.
+*Esta tecnología nos posibilita realizar programas en los que el código JavaScript accede al servidor
+*se puede comunicar y obtener información con la que, por ejemplo, modificar la página web actual.
 </div>
-<!--18---------------------------------------------------->
 <div class="slide">
-;Entornos en una aplicación web
+<!--3-->
-*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'''''
+;AJAX al rescate
-#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'''''.
+*Es importante tener en cuenta que esta comunicación es asíncrona (no sabemos exactamente cuando se va a producir la comunicación)
-#La parte del '''entorno servidor''' la cubrimos en este módulo: '''''Desarrollo de aplicaciones en entorno servidor'''''.
+{{Puntos clave|'''''Ajax''''' permite  sin salir de una página modificar su contenido en base a la información que se almacena en un servidor de Internet}}
 </div>
-<!--19---------------------------------------------------->
 <div class="slide">
-*Lógicamente una aplicación web a de tener cada una de esas partes
+<!--3-->
-*Especialemente está condicionada la parte del entorno servidor
-*En este módulo usaremos conceptos vistos en los otros.
-[[Imagen:ServidorWebVsCliente.jpg]]
+===Tecnologías y Arquitectura  web ===
+*Tiene que ver con las herramientas o programas a utilizar tanto para '''''desarrollar''''' y como para dar '''''servicios'''''
+{{Recursos de la Web|
+*https://developer.mozilla.org/es/docs/Web
+*http://blog.differential.com/14-technologies-every-web-developer-should-be-able-to-explain/
+*https://en.wikipedia.org/wiki/Web_development
+}}
 </div>
-<!--12---------------------------------------------------->
 <div class="slide">
-==El cliente en el proceso de ejecución de una aplicación web==
+<!--3-->
-*Es el usuario final  el que empieza el proceso.
+;Tecnología y Arquitectura web
-*También se conoce como agente.
+*Nosotros de momento usaremos la arquitectura de tipo LAMP (Linux Apache Mysql Php)
-*En el cliente necesitamos tener
+*Existen otras arquitecturas para desarrollar. Consiste en hacer convinacinoes de SO. Serivdor Web, Gestor de Bases de Datos, Lenguaje de programacion para el desarrollo).
-*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).
+{{Actividad|Localiza al menos 2 Arquitecturas diferentes}}
-*Necestitamos 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)
-*Ejetucar 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á y 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 y por lo tanto se elude esta información.
-*También se puede incluir  lo que se llama solicitud y fragmento. La solicitud son parejas variabla=valor que se pasan en la solicitud y el fragmente representa una parte concreta de la página que se solicita, utilizando el método GET dentro del protocolo http
 </div>
-<!--7-->
 <div class="slide">
-*ejemplo de direcciones
+<!--3-->
+===Tecnologías para programación web del lado del servidor===
+*Cuando programas una aplicación, utilizas un lenguaje de programación.
+*Por ejemplo, utilizas el lenguaje Java para crear aplicaciones que se ejecuten en distintos sistemas operativos.
+*Al programar cada aplicación utilizas ciertas herramientas como un entorno de desarrollo o librerías de código. *Además, una vez acabado su desarrollo, esa aplicación necesitará ciertos componentes para su ejecución.
+*Por ejemplo en el caso de javauna máquina virtual de Java.
+*Son consideraciones a tener en cuenta antes de empezar a desarrollar.
+</div>
+<div class="slide">
+<!--3-->
-#Usando fragmento
- '''protcolo://maquina/ruta/recurso/fragmento'''
+===Componentes de una aplicación web en el servidor===
- '''''http://www.unizar.es/deiss/notas.html#primerCurso'''''
+*1.-'''''Un servidor web''''' para recibir las peticiones de los clientes web
-#Usando solicitud
+**Suelen ser los navegadores. Reciben  la página que solicitan
- '''protcolo://maquina/ruta/recurso/solicitud'''
+**El servidor web debe conocer el procedimiento a seguir para generar la página web:
-  '''''http://www.unizar.es/deiss/notas.htmll?nombre="Manuel"&modulo="DWES"'''''
+Para ello tendrá módulos encargados de  la ejecución del código y cómo se debe comunicar con él.
-#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>
-==Los medios en el proceso de ejecución de una aplicación web==
+<div class="slide">
-*Aparte de la comunicación física necesitamos unos protocolos
+<!--3-->
-*Protocolos de la familia tcp/ip.
+;Componentes de una aplicación web en el servidor
-*Protocolos utilizados Http, tpc/udp, piv4 ipv6 icmp, y otros muchos que se pueden usar a nivel de aplicación.
+*2.-'''''El módulo encargado de ejecutar el código o programa'''''.
-==El servidor en el proceso de ejecución de una aplicación web==
+**genera la página web resultante.
-*Servidor Web
+**Este módulo debe integrarse de alguna forma con el servidor web
-*Recibe e interpreta la solicitud del cliente
+**Dependerá del lenguaje y tecnología que utilicemos para programar la aplicación web.
-*Accede a bases de datos según necesidades
+*3.- '''''Un gestor  de base de datos''''', será un servidor.
-*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
+**Este módulo no es estrictamente necesario pero se usa casi siempre.
-{{Pregunta|
+*4.-'''''El lenguaje de programación''''' que utilizarás para desarrollar las aplicaciones.
-¿Podemos visualizar  una página web sin que intervenga un servidor web?
+</div>
-}}
+<div class="slide">
-<!--MRM Tarea 1-->
+<!--3-->
-{{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, ...)
-}}
-==Páginas web estáticas Vs Web dinámicas==
-*Podemos comparar como acceder a una web es como ir a  comer a un restaurante
-**Puedes tomar el plato del día (Accedes al restaurante y te sirven lo que hay sin que puedas elegir)
-**Puedes elegir entre una serio de platos
-**Puedes confeccionar tu menú exactamente a tu gusto
-*Igualmente en un sitio web la página puede ser igual para cualquiera que acceda, o puede adaptarse a ti en concreto
-*Cuando hablamos de página web dinámicas debemos diferenciar entre
-#Aquellas que incluyen código que ejecuta el navegador. En estas páginas el código ejecutable, normalmente en lenguaje JavaScript, se incluye dentro del HTML (o XHTML) y se descarga junto con la página. Cuando el navegador muestra la página en pantalla, ejecuta el código que la acompaña. Este código puede incorporar múltiples funcionalidades que pueden ir desde mostrar animaciones hasta cambiar totalmente la apariencia y el contenido de la página. En este módulo no vamos a ver JavaScript, salvo cuando éste se relaciona con la programación web del lado del servidor.
+===La arquitectura de la aplicación===
-#Como ya sabes, hay muchas páginas en Internet que no tienen extensión .htm, .html o .xhtml. Muchas de estas páginas tienen extensiones como .php, .asp, .jsp, .cgi o .aspx. En éstas, el contenido que se descarga al navegador es similar al de una página web estática: HTML (o XHTML). Lo que cambia es la forma en que se obtiene ese contenido. Al contrario de lo que vimos hasta ahora, esas páginas no están almacenadas en el servidor; más concretamente, el contenido que se almacena no es el mismo que después se envía al navegador. El HTML de estas páginas se forma como resultado de la ejecución de un programa, y esa ejecución tiene lugar en el servidor web (aunque no necesariamente por ese mismo servidor).
+*Además de los componentes a utilizar, también es importante decidir cómo vas a organizar el código de la aplicación.
+*Esto se conoce como la arquitectura de la aplicación web.
+*Muchas de las arquitecturas que se usan en la programación de aplicaciones web te ayudan a estructurar el código de las aplicaciones en capas o niveles.
+*El motivo de dividir en capas el diseño de una aplicación es que se puedan separar las funciones lógicas de la misma, de tal forma que sea posible ejecutar cada una en un servidor distinto (en caso de que sea necesario).
+</div>
+<div class="slide">
+<!--3-->
+;Arquitectura de la aplicacion
+*Un servidor de aplicaciones web en realidad puede estar formado por varios servidores físicos;
+ cada servidor se puede encargar de ejecutar una parte de la aplicación.
+*Internamente se puede dividir la funcionalidad de una aplicación web en3 capas (Cliente, Sevidor, BD).
+</div>
+<div class="slide">
+<!--3-->
+;Arquitectura de tres capas
+#'''''capa de acceso a datos''''': que se tendrá que encargar de almacenar la información de la aplicación en una base de datos y recuperarla cuando sea necesario.
+#'''''capa intermedia''''' :  donde deberás programar la funcionalidad de tu aplicación.
+#'''''capa cliente:'''''  que es donde programarás todo lo relacionado con el interface de usuario, esto es, la parte visible de la aplicación con la que interactuará el usuario.
+</div>
+<div class="slide">
+<!--3-->
+*Dentro de la arquitectura de la aplicacion podemos ver tambíen arquitectura MVC (nivel de tres capas), o arquitectura de modelo Vista - Aplicacion o modelo de dos capas.
+*Este tema lo estudiaremos posteriormente.
+{{Recursos de la Web|
+*Qué es una aplicación web en [http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web wikipedia]
+*Qué es un desarrollo web en http://es.wikipedia.org/wiki/Desarrollo_web wikipedia]
+*Que es una URL vs diferencia con URI http://www.hispamedios.com/articles/id34-url-y-uri URI]
 }}
-==Aplicaciones Web==
+</div>
-*Las aplicaciones web emplean páginas web dinámicas para crear aplicaciones que se ejecuten en un servidor web y se muestren en un navegador.
+<div class="slide">
-*Una Aplicación Web, aunque funcionalmente puede hacer lo mismo que una aplicación de escritorio, presenta  ciertas ventajas e inconvenientes si las comparas con las aplicaciones tradicionales que se ejecutan sobre el sistema operativo de la propia máquina.
+<!--3-->
-;Ventajas de las aplicaciones web:
+===Instalación de herramientas===
-#No es necesario instalarlas en aquellos equipos en que se vayan a utilizar. Se instalan y se ejecutan solamente en un equipo, en el servidor, y esto es suficiente para que se puedan utilizar de forma simultánea desde muchos equipos.
+*Las herramientas que vamos a necesitar para desarrollar son las siguietnes
-#Como solo se encuentran instaladas en un equipo, es muy sencillo gestionarlas (hacer copias de seguridad de sus datos, corregir errores, actualizarlas).
+#'''''Apache''''' como servidor Web
-#Se pueden utilizar en todos aquellos sistemas que dispongan de un navegador web, independientemente de sus características (no es necesario un equipo potente) o de su sistema operativo.(Independiente del hardware).
+#'''''Mysql''''' como gestor de bases de datos relacional
-#Se pueden utilizar desde cualquier lugar en el que dispongamos de conexión con el servidor. Como dispositivos móviles.
+#'''''PHP''''' como lenguaje de programación en el servidor
-;Inconvenientes de las aplicaciones web:
+#'''''HTML''''' como páginas
-#El interface de usuario de las aplicaciones web es la página que se muestra en el navegador. Esto restringe las características del interface a aquellas de una página web.
+#'''''http''''' como protocolo de comunicaciones
-#Dependemos de una conexión con el servidor para poder utilizarlas. Si nos falla la conexión, no podremos acceder a la aplicación web.
+#'''''Netbeans''''' como EDI de desarrollo. Alternativamente se puede usar Sublime u otros (Mejor usar todos el mismo
-#La información que se muestra en el navegador debe transmitirse desde el servidor. Esto hace que cierto tipo de aplicaciones no sean adecuadas para su implementación como aplicación web (por ejemplo, las aplicaciones que manejan contenido multimedia, como las de edición de vídeo).
-#Al viajar la información por la red, existe un problema extra de seguridad.
-Para generar aplicaciones web, existen herramientas llamadas gestores de contenidos como Drupal, Joomla, Wrodpress y otras muchas. En ellas siempre vemos  dos partes bien diferenciadas:
+</div>
-#Una parte externa o front-end, que es el conjunto de páginas que ven la gran mayoría de usuarios que las usan (usuarios externos).
+<div class="slide">
-#Una parte interna o back-end, que es otro conjunto de páginas dinámicas que utilizan las personas que producen el contenido y las que administran la aplicación web (usuarios internos) para crear contenido, organizarlo, decidir la apariencia externa, etc.
+===Instalando Apache===
+[[Imagen:Apache.png|center|200px]]
+*Página oficial de apache http://httpd.apache.org/
+<source lang=bash>
+ apt-get install apache2
+</source>
+;Directorio donde se ubica todo
+ /etc/apache2
+</div>
-*Una aplicación web normalmente se divide en dos partes, un front-end, que es la parte pública que ven los usuarios externos; un back-end, que es la parte privada que usan los administradores de la aplicación.
+<div class="slide">
-===Programación en el servidor y en cliente===
+;Modificando directivas de configuración
-*Ya hemos dejado hablado un poco de estas dos tecnologías
+*Cada sitio web puede tener su propia configuracion dentro de nuestro servidor
-;El cliente se ejecuta  en el navegador
+  /etc/apache2/sites_available/
-*El código a ejecutar viene embido en forma de script en la página que el servidor nos entrega
+*En este directorio tendremos un fichero de configuración por sitio web.
-*Este script en principio no puede directamente acceder a los datos que tengamos en el servidor
+*Se cargarán aquellos cuyo enlace simbólico esté en el directorio /etc/apache2/sites_enable/
-*Todas las cosas que ejecuta aquí no tienen que viajar
+ ln -s fichero_origen_a_enlazar fichero_destino_que_es_enlace_simbolico
-{{Pregunta|Si quiero verificar que la contraseña introducida en una página web tenga una longitud mínima, ¿dónde sería preferible que se ejecutara el código de comprobación? }}
+</div>
-;El servidor ejecuta código y genera páginas html que entrega al cliente
-*El cliente nunca ve este código
+<div class="slide">
-*El servidor accede (si es necesario) a la información  que tenemos en la base de datos
+;Modificando directivas de configuración
-*El servidor responde a una solicitud del cliente y le entrega una página html
+{{Actividad|Localizamos el fichero de configuración del sitio web por defecto
-*No se puede pensar que el cliente necesita un dato y se lo pide al servidor y este se lo entrega, lo que entrega es una págian html. Esto debe quedar muy claro
+ /etc/apache2/sites_avaible/000-default.conf
-{{Puntos clave| El servidor ante una solicitud del cliente entrega una página html}}
+*Modificamos el DocumentRoot al directorio /var/www
-;AJAX Al rescate
-{{Pregunta|
-#¿Qué pasa cuando el cliente solo quiere un dato del servidor para actualziar la página que actual?
-#¿y si en un momento dado, sólo pretendemos almacenar algo y qudarnos como estamos?
 }}
-*Desde hace unos años existe una técnica de desarrollo web conocida como AJAX, que nos posibilita realizar programas en los que el código JavaScript que se ejecuta en el navegador pueda comunicarse con un servidor de Internet para obtener información con la que, por ejemplo, modificar la página web actual.
+</div>
-{{Punto clave| '''''Ajax''''' permite  sin salir de una página permite modificar su contenido en base a la información que se almacena en un servidor de Internet}}
+<div class="slide">
+{{Puntos clave|
+#Fichero de configuracion
+#Sitio web por defecto
+#Directiva '''''DocumentRoot'''''
+#Directiva '''''ServerName'''''
+#Directiva '''''<Directory> ... </Directory>'''''}}
+</div>
+<div class="slide">
+{{Actividad|
+#Probamos a ver si responde nuestro servidor web y Vemos el fichero de configuración}}
+*Para parar y arrancar un servicio en linux se puede hacer
+ sudo service '''nombre_del_servicio''' start|stop|restart|status
+<source lang=bash>
+ sudo service apache2 restart
+</source>
+</div>
+<div class="slide">
+;Propietarios de ficheros y procesos
+*Apache es un proceso propiedad del usuario www-data que está en el grupo www-data
+*Para cambiar el propietario de un fichero se usa el comando
+<source lang=bash>
+ sudo chown usuario:grupo fichero
+</source>
+</div>
-==Ejemplo de uso del comando curl==
+<div class="slide">
-*
+;Controlando errores
-==Arquitectura Web==
+*Es muy importante conocer la ubicación del fichero donde se identifican los errores según se producen por parte del servidor
-==Tecnologías y arquitectura  web ==
+*Muchas veces va a ser nuestro única forma de saber por qué algo está fallando
+{{Puntos clave|
+*Fichero de errores '''''/var/log/apache/error.log'''''
+*Recuerda el comando '''''sudo tail -f error.log'''''(mantiene el fichero abierto y actualizado)}}
+*Existen otros modulos y extensiones de apache que ya instalaremos cuando necesitemos.
+</div>
-.- Tecnologías para programación web del lado del servidor.
+<div class="slide">
-Icono de iDevice Caso práctico
-Imagen de un grupo de trabajo.
+<div class="slide">
+{{Actividad|
+*Intenta tener en local un sitio web llamado www.'''tuNombre'''.daw.com
+*Que se cargue una página web llamada 1.html ubicada por defecto en tu home/web (crea previamente el directorio
+*Explica en todos los pasos realizados
+}}
+</div>
+===Instalando Mysql===
+[[Imagen:mysql.png|center|200px]]
+*Página oficial de apache http://www.mysql.com/
-*Cuando programas una aplicación, utilizas un lenguaje de programación. Por ejemplo, utilizas el lenguaje Java para crear aplicaciones que se ejecuten en distintos sistemas operativos. Al programar cada aplicación utilizas ciertas herramientas como un entorno de desarrollo o librerías de código. Además, una vez acabado su desarrollo, esa aplicación necesitará ciertos componentes para su ejecución, como por ejemplo una máquina virtual de Java.
+*Hay que diferenciar en la instalación de mysql servidor y mysql cliente
-*Es importante ser consciente de ello para tener la capacidad de poder tomar una decisión en un momento determinado antes de empezar a desarrollar una aplicación.
+*Instalamos los dos programas
+<source lang=bash>
+ sudo apt-get install mysql-server mysql-client
+</source>
+;Directorio donde se ubica todo
+ /etc/mysql
+;fichero de configuración
+ /etc/mysql/my.cnf
-Los componentes principales para ejecutar una  aplicaciones web en un servidor son los siguientes:
+*Durante la instalación nos pedirá la contraseña de root
+*de forma totalmente antisegura introducimos root/root
+*En caso de perder la password probamos a entrar sin password y modificarla
+**Si nos queremos conectar a MYSQL sin necesidad de usuario y password:
+<source lang=bash>
+   mysql --defaults-file=/etc/mysql/debian.cnf
+</source>
-    '''''Un servidor web''''' para recibir las peticiones de los clientes web (normalmente navegadores) y enviarles la página que solicitan (una vez generada puesto que hablamos de páginas web dinámicas). El servidor web debe conocer el procedimiento a seguir para generar la página web: qué módulo se encargará de la ejecución del código y cómo se debe comunicar con él.
+*Reiniciar pass del "root" de MySQL (si lo hemos perdido):
-    '''''El módulo encargado de ejecutar el código o programa''''' y generar la página web resultante. Este módulo debe integrarse de alguna forma con el servidor web, y dependerá del lenguaje y tecnología que utilicemos para programar la aplicación web.
+<source lang=bash>
-    '''''Un gestor  de base de datos''''', será un servidor. Este módulo no es estrictamente necesario pero en la práctica se util#iza en todas las aplicaciones web que utilizan grandes cantidades de datos para almacenarlos.
+  mysql --defaults-file=/etc/mysql/debian.cnf mysql
-    '''''El lenguaje de programación''''' que utilizarás para desarrollar las aplicaciones.
+  mysql> update user set Password=password('password_nuevo') where User='root';
+  mysql> flush privileges;
+</source>
+*Probamos a entrar y que funciona bien
+<source lang=bash>
+ mysql -u root -p
+ '''insertamos la password'''
+ show databases:
+ use my_baseDatos;
+ SELECT database();
+</source>
+*Hay que recordar comandos básicos de mysql
+*uno muy útil es la ayuda
+<source lang=bash>
+ mysql -u root -proot
+  ......
+  mysql> help
+ //salen todos los comandos
+</source>
+*Referencia en la página oficial http://dev.mysql.com/doc/
+*Otra referencias web en plan de tutoriales
+#http://www.desarrolloweb.com/articulos/2408.php
+#http://www.linuxsc.net/the-manuals/59-the-manuals
-; La arquitectura de la aplicación:
-*Además de los componentes a utilizar, también es importante decidir cómo vas a organizar el código de la aplicación.Esto se conoce como la arquitectura de la aplicación web.  Muchas de las arquitecturas que se usan en la programación de aplicaciones web te ayudan a estructurar el código de las aplicaciones en capas o niveles.
-El motivo de dividir en capas el diseño de una aplicación es que se puedan separar las funciones lógicas de la misma, de tal forma que sea posible ejecutar cada una en un servidor distinto (en caso de que sea necesario).
-*Un servidor de aplicaciones web en realidad puede estar formado por varios servidores físicos; cada servidor se puede encargar de ejecutar una parte de la aplicación. De esta forma, y aunque externamente se vean como un único servidor, internamente se puede dividir la funcionalidad de una aplicación web en:
-#capa de acceso a datos: que se tendrá que encargar de almacenar la información de la aplicación en una base de datos y recuperarla cuando sea necesario.
-#capa intermedia :  donde deberás programar la funcionalidad de tu aplicación.
-#capa cliente:  que es donde programarás todo lo relacionado con el interface de usuario, esto es, la parte visible de la aplicación con la que interactuará el usuario.
+{{Actividad|Creamos una tabla e insertamos filas. Luego verificamos todo}}
-==Programación Web con Java==
+===Instalando php===
-*Dibujo de una taza de café humeante sobre las letras Java.
+[[Imagen:php.png|center|200px]]
-Java es el lenguaje de programación más utilizado hoy en día. Es un lenguaje orientado a objetos, basado en la sintaxis de C y C++ y eliminando algunas características de éstos que daban lugar a errores de programación, como los punteros. Todo el código que escribas en Java debe pertenecer a una clase.
+*Página oficial de php http://www.php.net/
-*El código fuente se escribe en archivos con extensión .java. El compilador genera por cada clase un archivo .class. Para ejecutar una aplicación programada en Java necesitamos tener instalado un entorno de ejecución (JRE). Para crear aplicaciones en Java necesitamos el kit de desarrollo de Java (JDK), que incluye el compilador.
+*Está página la consultaremos mucho
-*Como ya viste, existen básicamente dos tecnologías que te permiten programar páginas web dinámicas utilizando Java EE: servlets (clases Java compiladas que contienen instrucciones de salida para generar las etiquetas HTML de las páginas) y JSP (páginas web que contienen instrucciones para añadir contenido de forma dinámica).
-Aunque no es así en todos los casos, la mayoría de implementaciones disponibles para JSP compilan cada página y generan un servlet a partir de la misma la primera vez que se va a ejecutar. Este servlet se almacena para ser usado en futuras peticiones.
-Por ejemplo, si quieres calcular la suma de dos números y enviar el resultado al navegador, lo podríamos realizar con una página JSP, incluyendo el código en Java dentro de las etiquetas HTML utilizando los delimitadores <% y %> de la siguiente manera:
+*Ahora debemos instalar el módulo de php para apache
+*Se trata de que el servidor web sepa ejecutar fichero php
-  Página JSP que contiene etiquetas HTML y una línea de código Java que muestra el resultado de efectuar una suma.
+<source lang=bash>
+  sudo apt-get install php5 libapache2-mod-php5
+</source>
+;Directorio donde se ubica todo
+ /etc/php5
+;fichero de configuración de php para apache
+ /etc/php5/apache2/php.ini
-O también utilizando el método println dentro de un servlet como el siguiente, que obtiene los valores a sumar de otra página:
+*Debemos restaurar el servicio para que los cambios tengan efecto en el servidor web
+<source lang=bash>
+/etc/init.d/apache2 restart
+</source>
+{{Actividad|
+*Localiza el fichero de configuracion de php: '''''php.ini'''''
+*Analiza el valor y significado de las siguientes directivas
+#short_open_tags
+#max_execution_time
+#error_reporting
+#file_upload
+#upload_max_filesize}}
- Código de un servlet que se encarga de sumar dos parámetros y mostrar el resultado obtenido.
-No hay nada que se pueda hacer con JSP que no pueda hacerse también con servlets. De hecho, como ya viste, las primeras se suelen convertir en servlets para ser ejecutadas.
-El problema de utilizar servlets directamente es que, aunque son muy eficientes, son muy tediosos de programar puesto que hay que generar la salida en código HTML con gran cantidad de funciones como println. Este problema se resuelve fácilmente utilizando JSP, puesto que aprovecha la eficiencia del código Java, para generar el contenido dinámico, y la lógica de presentación se realiza con HTML normal.
-De esta forma estas dos tecnologías se suelen combinar para crear aplicaciones web. Los servlets se encargan de procesar la información y obtener resultados, y las páginas JSP se encargan del interface, incluyendo los resultados obtenidos por los servlets dentro de una página web.
+===Instalando Netbeans===
+;Instalando Netbeans
+*Primero debemos ver si tenemos instalado java
+<source lang=bash>
+ java -version
+</source>
+*Nos dirá la versión que actualmente tenemos instalada o que no lo tenemos.
+*En caso de no tenerla lo instalamos, podemos seguir esta [http://www.ubuntu-guia.com/2012/04/instalar-oracle-java-7-en-ubuntu-1204.html guia]
+*jdk, jre, jvm
+*Primero instamalos el jre
+<source lang="bash">
+sudo apt-get install icedtea-7-plugin openjdk-7-jre
+</source>
+*Luego el jdk
+<source lang="bash">
+sudo apt-get install openjdk-7-jdk
+</source>
+*Ahora verificamos la instalación
+<source lang=bash>
+# java -version
+java version "1.7.0_65"
+OpenJDK Runtime Environment (IcedTea 2.5.2) (7u65-2.5.2-3~14.04)
+OpenJDK 64-Bit Server VM (build 24.65-b04, mixed mode)
+</source>
+===Instalar netbeans===
+*Descargamos la última versión
+ https://netbeans.org/downloads/
+*No tiene ningún misterio la instalación
+*Debemos comprobar nuestro equipo sea de 64 bits o de 32
+<source lang=bash>
+# uname -a
+</source>
+*Otra forma de ver información del sistema
+<source lang=bash>
+ lsb_release -a
+</source>
+*Seleccionamos la descarga de php y la máquina virtual de java por si no la tuviéramos instalada
+*Accedemos al fichero descargado
+*Le damos permiso de ejecución  y ejecutamos dicho fichero
+<source lang=bash>
+chmod +x jdk-8u20-nb-8_0_1-linux-x64.sh
+./jdk-8u20-nb-8_0_1-linux-x64.sh
+</source>
+*Una vez instalado se puede ejecutar y no hace falta modificar ningún parámetro
+===Instalando phpmyadmin===
+*Este es un programa php que me va a permitir seguir de forma gráfica la base de datos
+*Podemos hacer una gestión con interfaz gráfica
+<source lang=bash>
+   sudo apt-get install phpmyadmin
+</source>
+*Una vez instalado puede ser que tengamos que hacer un enlace simbólico en nuestro DocumentRoot
+*Suponiendo que lo haya instalado todo en /etc/php5/phpmyadmin, y que nuestro DocuemntRoot apunte a /var/www
+<source lang=bash>
+ ln -s /etc/php5/phpmysqmin /var/www/phpmyadmin
+</source>
-*
-</div>
-<!--6-->
-<div class="slide">
+===Montando nuestra arquitectura Instalar Apache php y MySql===
+*El proceso de instalación se puede hacer siquiendo la instalacion  lamp
+#http://www.howtoforge.com/installing-apache2-with-php5-and-mysql-support-on-ubuntu-12.04-lts-lamp
-{{Recursos de la Web|
+===Instalar xdebug===
-*Qué es una aplicación web en [http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web wikipedia]
+*Es una herramienta que nos va a permitir debugar nuestras aplicaciones php
-*Qué es un desarrollo web en http://es.wikipedia.org/wiki/Desarrollo_web wikipedia]
+*Podemos consultar la pagina de netbeans para la informacion
-*Ques es una URL vs diferencia con http://www.hispamedios.com/articles/id34-url-y-uri URI]
+ https://netbeans.org/kb/docs/php/configure-php-environment-ubuntu.html#xdebug-package
-}}
+<source lang=bash>
+sudo apt-get install php5-dev php-pear
+</source>
+<source lang=bash>
+ sudo pecl install xdebug
+</source>
+*A continuacion debemos modificar el fichero ini de php
+*Abrimos con nuestro editor el fichero
+<source lang=bash>
+ sudo vim /etc/php5/apache2/php.ini .
+</source>
+*Añadimos el módulo de xdebug a la variable zend_extenxion de php
+<source lang=bash>
+zend_extension=/usr/lib/php5/<DATE+lfs>/xdebug.so
+xdebug.remote_enable=on
+</source>
 |}
+</div>

Diferencia entre revisiones de «Usuario:ManuelRomero/micursos/DWES/Tema1/Aplicaciones Web»

Última revisión de 18:53 5 oct 2015

Contenido

Aplicaciones Web

Puntos clave

Ejemplo

Aplicaciones Web Vs Escritorio

Conceptos a tener claros para desarrollo web

Organizando conceptos

Pregunta

Herramientas para desarrollar

Pregunta

Back-end y front-end de una aplicación web

Programación en el servidor y en cliente

Puntos clave

Pregunta

Puntos clave

Pregunta

Puntos clave

Tecnologías y Arquitectura web

Recursos de la Web

Actividad

Tecnologías para programación web del lado del servidor

Componentes de una aplicación web en el servidor

La arquitectura de la aplicación

Recursos de la Web

Instalación de herramientas

Instalando Apache

Actividad

Puntos clave

Actividad

Puntos clave

Actividad

Instalando Mysql

Actividad

Instalando php

Actividad

Instalando Netbeans

Instalar netbeans

Instalando phpmyadmin

Montando nuestra arquitectura Instalar Apache php y MySql

Instalar xdebug

Menú de navegación

Buscar