t4 Practica

BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB

FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -I- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)

Prctica 4 (0,15 Puntos)

Introduccin a la Programacin Web

Fundamentos de Aplicaciones y Servicios Telemticos

2 Curso Grado en Ingeniera de Tecnologas de Telecomunicacin

Departamento de Ingeniera Telemtica (DIT)

Universidad de Sevilla

Curso 2012/2013

Fco. Javier Muoz Calle

Francisco Jos Fernndez Jimnez

Jos ngel Gmez Argudo

Ignacio Campos Rivera


FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -II- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)

NDICE

1 Objetivos y alcance (5 minutos) ...................................................................................................... 1

1.1 Objetivo de la prctica ............................................................................................................. 1

1.2 Planificacin de la prctica ...................................................................................................... 1

1.3 Documentacin de apoyo ........................................................................................................ 1

2 Despliegue de aplicaciones web (30 minutos) ................................................................................ 2

2.1 Introduccin............................................................................................................................. 2

2.1.1 Instalacin de los archivos ............................................................................................ 2

2.1.2 Configuracin del servidor web.................................................................................... 2

2.2 Servidor web utilizado en la prctica ...................................................................................... 3

2.3 Publicacin de aplicacin web localmente .............................................................................. 6

2.4 Publicacin de aplicacin web remotamente .......................................................................... 6

3 Editores y entornos de desarrollo (60 minutos) .............................................................................. 7

3.1 Modo texto .............................................................................................................................. 8

3.1.1 Nano ............................................................................................................................. 9

3.1.2 Vim ............................................................................................................................... 9

3.1.3 Emacs.......................................................................................................................... 10

3.2 Modo grfico ......................................................................................................................... 11

3.2.1 Bluefish ....................................................................................................................... 11

3.2.2 Amaya ......................................................................................................................... 12

3.2.3 Eclipse ........................................................................................................................ 13

3.2.3.1 Workspace ...................................................................................................... 13

3.2.3.2 Instalacin de plugins ..................................................................................... 15

3.2.4 Netbeans ..................................................................................................................... 16

4 Ejemplo de Test (5 minutos) ......................................................................................................... 17


FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -1- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)

1 Objetivos y alcance (5 minutos)

1.1 Objetivo de la prctica

El objetivo de esta prctica es aprender a desplegar aplicaciones web en servidores ya instalados y

configurados y revisar los distintos editores que se pueden utilizar para desarrollar aplicaciones web.

1.2 Planificacin de la prctica

Sesiones de Prcticas de este Tema Apartados a realizar de esta memoria

Sesin 1 Todos (+Test Prctica)

1.3 Documentacin de apoyo

Apache. Ken Coar, Rich Bowen. O'Reilly (Anaya Multimedia). Madrid, 2008.

Documentacin de apache: http://httpd.apache.org/docs/2.4/

Documentacin general de emacs:

http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html

Documentacin de Nano: http://www.nano-editor.org/overview.php

Informacin de Vim: http://www.vim.org/about.php

Informacin de Bluefish: http://bluefish.openoffice.nl/features.html

Informacin sobre Amaya: http://www.w3.org/Amaya/

Informacin sobre Eclipse: http://www.eclipse.org/

Informacin sobre Netbeans: http://netbeans.org/features/index.html



2 Despliegue de aplicaciones web (30 minutos)

DESCARGA DE LOS FICHEROS DE ESTA PRCTICA En esta prctica se han creado varias pginas web de ejemplo. Para que no tenga que escribir dichas

pginas a mano, y le d tiempo a terminar la prctica, puede descargarse los ficheros ya escritos.

Para ello, realice los siguientes pasos:

1 Acceda a la pgina Web de la Asignatura en Enseanza Virtual (acceda usando la mquina Virtual) y vaya a la mima carpeta en la que se encuentra la memoria de esta prctica. En dicha

carpeta encontrar el fichero "t4-ficheros.tar.gz". Descrguelo a su mquina local,

dentro del directorio "/home/afast/".

2 Con el usuario "afast", ejecute los siguientes comandos para descomprimir el archivo:

cd /home/afast/

tar xfvz ./t4-ficheros.tar.gz

A partir de ese momento, dispondr de los distintos ficheros en la carpeta

"/home/afast/webdemo/".

2.1 Introduccin

Desplegar, implantar o publicar una aplicacin web (deploy/publish en ingls) consiste en instalar los

archivos necesarios y configurar el servidor web (si fuera necesario) para hacer accesible la aplicacin

web desde Internet. En general, este proceso puede variar de un servidor web a otro. Sin embargo, la

mayora de ellos siguen el mismo modelo de despliegue, compuesto por las siguientes fases:

instalacin de archivos y configuracin del servidor web.

2.1.1 Instalacin de los archivos

Todas las pginas web y recursos (imgenes, videos, etc.) que forman parte de una aplicacin web

suelen guardarse en un directorio accesible por el servidor web. En este paso se copian los ficheros

desde el directorio de desarrollo (o se transfieren usando algn servicio de transferencia de ficheros,

como puede ser ftp o sftp) y a continuacin se verifica que todos los directorios y ficheros tienen los

permisos necesarios para que el servidor pueda acceder a ellos (permiso de bsqueda en los directorios

y permiso de lectura en los ficheros).

2.1.2 Configuracin del servidor web

A continuacin hay que indicar en la configuracin del servidor web que la aplicacin est preparada

para ser accedida desde Internet. Se pueden configurar muchos parmetros: lenguajes dinmicos

admitidos, ancho de banda permitida, configuracin de seguridad y autorizacin,Muchos de esos

parmetros, si no se configuran, reciben los valores que tenga configurado el servidor por defecto. Una

de las cosas ms importantes a configurar es la relacin entre la URL solicitada por el cliente y el

contenido que se suministrar.



Los servidores web suelen ser muy flexibles en este aspecto y existen muchas formas de asignar una

URL a un recurso web (pgina, imagen, etc.). Es ms, puede que, como se ver en temas posteriores,

una URL no se corresponda a un archivo fsico real, generndose el contenido dinmicamente. Entre

las formas ms bsicas de asociacin est el asociar un directorio completo y todos sus archivos del

sistema de ficheros a las URL que vayan prefijadas por un alias. Por ejemplo, si se asocia la carpeta

/home/afast/web al alias afast, un cliente que intentara acceder a la URL

http://servidor/afast/rutaAFichero hara que el servidor buscase el fichero

/home/afast/web/rutaAFichero y lo sirviese. En estos casos, tambin hay que configurar

que debe hacer el servidor cuando rutaAFichero es una cadena vaca o coincide con un

directorio. Lo habitual es buscar un archivo con un nombre determinado, llamado ndice de

directorio. Cuando la URL no contiene alias o lo contiene pero no est definido en el servidor, se

busca el recurso en el directorio por defecto que se denomina raz de documentos (que tambin se

puede configurar).

Si la aplicacin web depende de otros servidores (como un servidor de bases de datos), tambin habra

que configurar estos.

Una vez que el servidor est configurado convenientemente para la aplicacin web, no es necesario

volver a configurarlo cuando la aplicacin se modifique.

2.2 Servidor web utilizado en la prctica

El servidor web utilizado en esta prctica es Apache HTTP Server (http://httpd.apache.org). Apache es

uno de los servidores web ms utilizados y provee tanto contenido esttico como dinmico. Entre sus

ventajas se pueden destacar la modularidad de la que est compuesta (podemos ser capaces de

configurar y cargar exactamente los mdulos que necesitemos), o la versatilidad para funcionar en

distintas plataformas (Unix, Windows, Mac, etc.).

Este servidor ya est instalado y configurado, por lo que no necesitar hacer nada en este aspecto. La

instalacin y configuracin del servidor Apache ser tema de estudio de asignaturas posteriores. Si

est interesado en obtener ms informacin, puede visitar la siguiente pgina web:

http://httpd.apache.org/docs/2.2/

En Debian, la configuracin del servidor Apache est almacenada en /etc/apache2.

Sin embargo, es importante conocer es la configuracin que tiene en la mquina virtual de FAST, ya

que lo necesitaremos para hacer pruebas con las aplicaciones web que desarrollemos durante el curso.

En la siguiente tabla se muestran los alias y la raz de documentos definidos en el servidor:

Aplicacin Web Directorio local Comentarios

Raz de documentos /var/www Como ndice de directorio se

buscar un fichero con los

siguientes nombres (en este

orden): index.html, index.cgi,

index.pl, index.php,

index.xhtml, index.htm.

Si no existe el ndice de

directorio el servidor generar



dinmicamente una pgina web

con el listado de ficheros que

contiene el directorio.

Alias manual /usr/share/doc/apache2-doc/manual/ Mismo ndice de directorio que la raz de documentos, pero si

no existe, genera un error.

Alias server-status Ninguno, pgina generada dinmicamente.

Solo accesible desde la mquina

local. Cualquier peticin desde

el exterior ser prohibida.

Alias afast /home/afast/web Mismo ndice de directorio que la raz de documentos, pero si

no existe, genera un error.

Todas estas aplicaciones web son servidas usando tanto HTTP (usando el puerto 80 TCP) como

HTTPS (usando el puerto 443 TCP).

Para controlar el funcionamiento del servidor utilice uno de estos dos comandos como usuario root:

service apache2 [ orden ]

/etc/init.d/apache2 [ orden ]

Si no se escribe orden se muestra un listado de las rdenes posibles. Las ms habituales son:

Orden Funcionamiento start Inicia el servidor

stop Para el servidor restart Para y a continuacin inicia el servidor

status Muestra si el servidor est funcionando.

El servidor web no necesita ser reiniciado cuando cambiamos una aplicacin web. Solo habr que

hacerlo cuando se cambia la configuracin.

El servidor web se ejecuta como usuario www-data. Deber tenerlo en cuenta a la hora de asignar

permisos a los ficheros y directorios que quiera publicar.



TA

RE

AS

Antes de continuar con la prctica vamos a probar que toda la configuracin indicada

anteriormente es correcta.

1 Como usuario afast, ejecute los siguientes comandos:

echo "Hola mundo" > ~/web/prueba

2 Como usuario root, ejecute los siguientes comandos:

mkdir /var/www/test

echo "Hola mundo root" > /var/www/test/prueba

3 Compruebe si el servidor web est funcionado (como usuario root):

service apache2 status

4 Reinicie el servicio web (como usuario root):

service apache2 restart

5 Averige la direccin IP de su mquina virtual y desde la mquina real u otro ordenador, acceda con el navegador web a las siguientes direcciones, comprobando que el resultado

es el esperado de acuerdo a la configuracin anterior:

http://ip

https://ip (aada una excepcin de seguridad si lo solicita el navegador)

http://ip/test

https://ip/test/prueba

http://ip/manual/es

http://ip/server-status (debera dar un error)

http://ip/afast (debera dar un error por no encontrar el fichero ndice de directorio)

http://ip/afast/prueba

TA

RE

AS

6 Acceda con el navegador web de su mquina virtual a las siguientes direcciones, comprobando que el resultado es el esperado de acuerdo a la configuracin anterior:

http://localhost

https://localhost (aada una excepcin de seguridad si lo solicita el navegador)

http://localhost/manual/es

http://localhost/server-status (NO debera dar un error)

http://localhost/server-status/cualquiercosa (NO debera dar un error)

http://localhost/afast/prueba

Cambie los permisos al fichero /home/afast/web/prueba para que el servidor web no

pueda leerlo:

chmod 640 /home/afast/web/prueba

7 Acceda con el navegador web de su mquina virtual a la siguiente direccin:

http://localhost/afast/prueba (debera dar un error)



2.3 Publicacin de aplicacin web localmente

Los ficheros que puede descargar para esta prctica constituyen una aplicacin web de ejemplo que

puede utilizar para probar el funcionamiento correcto del servidor, tanto para pginas estticas como

para pginas dinmicas (PHP en este caso).

Usando el servidor web instalado en la mquina virtual, lo nico que es necesario hacer para publicar

una aplicacin web es copiar los ficheros de ella en un directorio que se est sirviendo.

TA

RE

AS

1 Copie, como usuario afast, todos los ficheros y directorios que estn en el directorio

/home/afast/webdemo (este directorio debi ser creado cuando extrajo los ficheros

de esta prctica):

cp r ~/webdemo/* ~/web

Verifique que en la carpeta ~/web existe el fichero index.html.

2 Abra con un editor el fichero ~/web/index.html. Observe la estructura del documento

y a continuacin pruebe como se ve en un navegador web, accediendo a la URL

http://IP/afast.

3 Repita el paso anterior con los ficheros ~/web/P04/ej_html.html y

~/web/P04/estilo.css. En este caso, la pgina web incluye un archivo externo CSS

(se ver en el tema 5). Vea el resultado accediendo a la URL

http://IP/afast/P04/ej_html.html.

TA

RE

AS

4 Repita el paso anterior con el fichero ~/web/P04/ej_javascript.html. En este

caso se trata de una pgina web con contenido dinmico interpretado en el cliente. Averige

la URL que debe escribir para ver la pgina web desde un navegador.

5 Por ltimo, repeta el paso anterior con los ficheros ~/web/index.php y

~/web/P04/phphtml.php. Estos ficheros son pginas web con contenido dinmico

interpretado en el servidor. Averige las URL que debe escribir para ver las pginas web

desde un navegador.

6 Cambie el nombre al archivo ~/web/index.html para que sea

~/web/index2.html. Vuelva a acceder a http://IP/afast y compruebe el resultado.

2.4 Publicacin de aplicacin web remotamente

El procedimiento ser similar al visto en el apartado anterior, salvo que en este caso tendremos que

hacer uso de algn protocolo de transferencia de ficheros como puede ser FTP o SFTP. Algunos

editores avanzados permiten hacer la transferencia desde la misma aplicacin como veremos

posteriormente.



3 Editores y entornos de desarrollo (60 minutos)

Existen muchos editores y entornos que permiten desarrollar pginas web. Existen muchos factores

que nos puede llevar a usar uno u otro, entre otras:

a) Disponibilidad de interfaz grfica. No siempre es posible disponer de interfaz grfica. A veces

es necesario hacer modificaciones del cdigo en el propio servidor (que normalmente no

tienen interfaz grfica). Siempre es conveniente saber manejar alguna de las aplicaciones ms

comunes que funcionan en modo texto. Entre otras, puede buscar informacin sobre los

programas vi, emacs y nano.

vi (o vim): http://es.wikipedia.org/wiki/Vi

emacs (tambin se puede usar en modo grfico): http://es.wikipedia.org/wiki/Emacs

nano: http://www.nano-editor.org/

b) Extensin del proyecto a realizar. No es lo mismo tener que editar pocos ficheros que manejar

una aplicacin con muchos ficheros. Cuando se trabaja con un elevado nmero de ficheros

simultneamente es habitual utilizar editores que soporten el concepto de Proyecto. Un

proyecto recopila el conjunto de ficheros relacionados que forman parte de una misma

aplicacin web y permite guarda informacin de configuracin y generacin. Si se trabaja con

proyectos, antes de empezar a codificar hay que crear un proyecto y configurarlo. Este paso

puede requerir tiempo que a la larga acelera el trabajo, pero que para proyectos pequeos

puede suponer una prdida de tiempo.

TA

RE

AS

1 Borre el contenido del directorio /home/afast/web:

rm r ~/web/*

2 Desde otro ordenador (o desde la mquina real) y utilizando sftp vuelva a copiar todos los

archivos de ejemplos al directorio web. Compruebe que todo funciona correctamente.

3 Repita el paso anterior usando el comando scp.

4 Repita el paso anterior utilizando el programa gftp que est instalado en la mquina

virtual. En la barra de herramientas superior rellene los campos de la siguiente manera:

Servidor = IP de la mquina

Puerto = 22

Usuario = afast

Contrasea = contrasea de afast

Protocolo = SSH2

Y a continuacin pulse intro. Una vez conectado, haga la transferencia de ficheros.



c) Trabajo en grupo o en empresa. A veces el uso de un editor u otro viene impuesto por la

empresa en la que trabajemos o el equipo de trabajo del que formemos parte. De tal manera

que la comparticin de trabajo sea ms sencilla y ms rpida.

d) Subjetividad y costumbre. Todos los editores avanzados requieren un periodo de aprendizaje

para llegar a utilizarlos con la mxima productividad. Adems las funcionalidades, aspecto y

modo de uso puede ir cambiando con el tiempo, conforme se mejora el editor. Aunque existan

editores que pueden realizar mejor una tarea determinada, puede ser que sta se realice ms

rpidamente con editor ms bsico, pero que necesite menos tiempo de aprendizaje. Otras

veces, el tiempo invertido en aprender a manejar un editor avanzado merece la pena.

e) Lenguajes soportados. En el desarrollo de software y de aplicaciones web, es habitual trabajar

simultneamente con varios lenguajes de programacin/diseo. En estos casos es preferible

trabajar con un mismo editor que soporte todos los lenguajes en vez de estar continuamente

cambiando entre distintos editores.

f) Sistemas operativos soportados. Es preferible un editor que se pueda utilizar en distintos

sistemas operativos a otro que requiera un sistema operativo determinado.

g) Herramientas disponibles y automatizacin de la codificacin. Aparte de la codificacin, el

desarrollo de aplicaciones web tambin requiere depurar, probar y desplegar. En aplicaciones

complejas, son muy tiles herramientas que nos ayuden en estas tareas. Tambin existen

editores que tambin nos autocompletan lo que estamos escribiendo, generan cdigo a partir

de diagramas y esquemas, etc.

El uso de un editor u otro puede incluso puede llevar a fenmenos de fans. Son muy conocidas las

guerras (metafricamente hablando) que hay entre los usuarios de vi y emacs defendiendo su editor

como el mejor (http://en.wikipedia.org/wiki/Editor_war). Tambin ocurre lo mismo entre los usuarios

de eclipse y netbeans.

En esta asignatura no queremos obligar a usar un editor en concreto, sino que el alumno sea consciente

de las posibilidades que tiene y elija de acuerdo al trabajo que vaya a realizar. En esta prctica se

espera que el alumno pruebe distintos editores y se tome su tiempo para probar las distintas

funcionalidades que proporciona cada uno, en el contexto de la programacin web.

3.1 Modo texto

Usar un editor en modo texto es siempre ms difcil al principio, ya que al no disponer de ratn, todas

las operaciones hay que hacerla mediante secuencias de teclas. Por lo que la primera vez que se utiliza,

es conveniente mirarse la ayuda o un tutorial sobre las secuencias de teclas ms habituales. A cambio,

una vez aprendidas las secuencias, muchos programadores defienden que se trabaja mucho ms

rpidamente, debido a que en ningn momento hay que apartar la mano del teclado para coger el ratn

(minimizando los movimientos que hace la mano).

Cuando se trabaja con servidores remotos, es conveniente aprender al menos uno de los ms usados (y

que suelen estar disponibles en todos los sistemas por defecto).



3.1.1 Nano

Nano es un editor muy simple (http://www.nano-editor.org/overview.php) que incluye funciones tiles

para la programacin como son texto coloreado para resaltado de sintaxis, expresiones regulares para

bsqueda y reemplazo, desplazamiento vertical suave, y buffers mltiples.

3.1.2 Vim

Vim (http://www.vim.org/about.php) es una modificacin del editor vi, un editor que est presente en

todos los sistemas Unix. ltimamente casi todas las distribuciones han modificado el vi original por

vim (http://es.wikipedia.org/wiki/Vim). Como explican en http://www.vim.org/6k/features.es.txt, sus

funcionalidades incluyen:

Corrector ortogrfico integrado

Autocompletado de texto

Navegacin por pestaas

Ventanas mltiples, que dividen el rea de edicin horizontal o verticalmente.

Resaltado de sintaxis dependiente del lenguaje de programacin o de etiquetas utilizado

rdenes deshacer y rehacer

Comprensin de ms de 200 sintaxis diferentes

Lenguaje de scripting para programar extensiones

Completado de rdenes, palabras y nombres de ficheros

Compresin y descompresin de ficheros, que posibilita editar ficheros comprimidos

Reconocimiento de formatos de fichero y conversin entre los mismos.

Historial de rdenes ejecutadas

Grabacin y reproduccin de macros

Guardado de la configuracin entre sesiones

Plegado automtico y manual de cdigo

Interfaz grfica opcional

Altamente configurable y personalizable

Casi 100% compatible con vi, pero sin muchos de sus defectos

TA

RE

AS

1 Con el usuario afast, abra el fichero ~/web/P04/ej_javascript.html:

nano ~/web/P04/ej_javascript.html

2 Corrija el carcter que se ve mal.

Aada justo antes de la lnea donde aparece la lnea:

Modificado con nano

3 Guarde el archivo, pulsando la combinacin de teclas Ctrl-O. Pulse intro para confirmar el nombre. A continuacin salga pulsando Ctrl-X.



Aunque como se deca al principio, para realizar todo lo anterior, es necesario recordar muchos

comandos. En la mquina virtual est instalada una versin reducida de vim, por lo que mucha de esa

funcionalidad no est disponible (pero podra instalarse).

TA

RE

AS

1 Con el usuario afast, abra el fichero ~/web/P04/ej_html.html:

vi ~/web/P04/ej_javascript.html

2 Pulse la tecla j hasta que el cursor est situado delante de . Pulse la tecla i

y escriba:

Modificado con vi

3 Pulse la tecla ESC, y a continuacin escriba :wq. Esto guardar el fichero. Compruebe la

modificacin con un navegador.

Puede consultar otro tutorial de vim en la siguiente direccin:

http://www.linuxhispano.net/2011/03/16/tutorial-de-vivim/

3.1.3 Emacs

Emacs puede ejecutarse en modo texto y en modo grfico. Emacs detecta si hay entorno grfico y si

no lo hubiera se inicia en modo texto. Puede forzar el modo texto utilizando como parmetro -nw.

Las caractersticas estn a la par de Vim. Es extensible mediante gran cantidad de mdulos, que

permiten funcionalidades tan variadas como consultar el correo electrnico o jugar. Igual que los otros

editores en modo texto, requiere el conocimiento de muchas combinaciones de teclas, aunque cuando

se usa en modo grfico, gran parte de la funcionalidad se puede realizar mediante mens.

Puede consultar la documentacin de emacs en la siguiente web:

http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html. Si echa un vistazo por los

ttulos de las secciones se podr hacer una idea de la gran cantidad de cosas que se pueden realizar.

Tambin puede mirar algunas de las caractersticas de mdulos especializados en edicin web:

http://ourcomments.org/Emacs/nXhtml/doc/nxhtml.html



3.2 Modo grfico

La posibilidad de realizar acciones mediante mens, facilita el aprendizaje inicial, aunque muchas de

esas acciones tambin se pueden realizar mediante combinaciones de teclas. El hecho de poder usar

elementos grficos y distintas tipografas tambin permite presentar ms informacin que la que sera

posible mostrar en modo texto.

Seguramente, ya haya usado el editor gedit o kate. Ambos ofrecen un editor sencillo, con resaltado

de sintaxis y funciones bsicas como el sangrado, la correccin ortogrfica y la posibilidad de

comentar trozos de cdigo.

Mostraremos en este apartado brevemente los editores/entornos de desarrollo Bluefish, Amaya,

Eclipse y Netbeans.

3.2.1 Bluefish

Es un entorno de desarrollo web muy ligero y con asistentes que facilitan la inclusin de cdigo.

Adems soporta proyectos y se puede publicar la aplicacin web desde la propia aplicacin. Puede ver

sus caractersticas principales en la siguiente URL: http://bluefish.openoffice.nl/features.html

TA

RE

AS

1 Desde otra mquina (o desde la mquina real) abra con emacs el archivo index.html que

est en su mquina virtual (apertura remota del archivo). Se le pedir la contrasea del

usuario afast:

emacs /ssh:afast@ip:web/index.html

2 Maximice la ventana de cdigo pulsando la combinacin de teclas Ctrl-X 1.

3 Ponga el cursor al comienzo de la lnea donde aparece . Pulse la secuencia Ctrl-C

Intro Tabulador. Escriba Modificado con emacs y pulse intro.

4 Guarde el archivo pulsando la secuencia de teclas Ctrl-X Ctrl-S. Compruebe con el navegador que ha cambiado la pgina web mostrada.

5 Mire los distintos elementos que incluyen los mens Tools, HTML y SGML y pruebe alguno de ellos.

6 Repita la tarea desde el principio ahora, utilizando la opcin -nw. Escriba un nuevo prrafo. Para acceder a los mens, tendr que usar la tecla F10.

emacs nw /ssh:afast@ip:web/index.html



3.2.2 Amaya

Amaya es un editor/navegador web creado por el W3C (The World Wide Web Consortium), que

permite editar el cdigo directamente desde una URL de manera WYSIWYG. Puede ver ms

informacin sobre este editor en su pgina web: http://www.w3.org/Amaya/

TA

RE

AS

1 Abra con bluefish el archivo ~/web/index.html:

bluefish ~/web/index.html &

2 Site el cursor justo detrs de . Seleccione el men

"Dilogos>Tablas>Asistente...". Indique 2 filas y 3 columnas. Acepte.

3 Aada un nmero diferente entre las etiquetas y .

4 Con el botn derecho, sobre la etiqueta seleccione Editar etiqueta.

Modifique los campos Relleno de celda, Borde, Color al valor que desee, y

acepte. Comprobar que se ha aadido cdigo.

5 Guarde el documento. Y seleccione el men Herramientas>Firefox para ver el

resultado.

6 Inspecciones los mens, pestaas y barra de herramientas y haga pruebas.

TA

RE

AS

1 Abra el programa Amaya, a travs del men del sistema

Aplicaciones>Internet>Amaya

2 En la barra de direcciones que por defecto tiene

/usr/lib/Amaya/amaya/AmayaPage_WX.html.es escriba:

http://www.us.es

3 Modifique el texto de la pgina web directamente (el que usted desee). Pruebe a aadir y

eliminar elementos de la pgina.

4 Seleccione el men Ver>Cdigo fuente. Seleccione un elemento grfico de la

pgina web. Comprobar que se marca en el cdigo fuente la lnea que le corresponde.

5 Inspecciones los mens, pestaas y barra de herramientas y haga pruebas.



3.2.3 Eclipse

Eclipse es un entorno de desarrollo integrado de cdigo abierto multiplataforma. Se basa en un ncleo

central (Plataforma Eclipse), un conjunto de plugins opcionales, y una interfaz grfica y entorno

comn para integrar todas las herramientas. Esta arquitectura hace que a partir de la base de Eclipse se

puedan crear entornos de desarrollo personalizados, para determinados lenguajes, o tareas concretas,

con solo cambiar el conjunto de plugins que se ejecutan sobre la plataforma base.

En la pgina web principal de Eclipse http://www.eclipse.org/, y en concreto en la pgina de descarga

(http://www.eclipse.org/downloads/) podr comprobar que existen muchas versiones (conocidas como

paquetes de eclipse) distintas de eclipse. Cada versin consiste en la plataforma eclipse junto con un

conjunto de plugins optimizados para una finalidad. Sin embargo, una vez descargada una de las

versiones, se puede conseguir la misma funcionalidad de otras, instalando los plugins necesarios. En

esta asignatura, la base de eclipse que se ha utilizado es Eclipse IDE for Java EE Developers,

versin Juno (4.2), a la que se le han aadido ms plugins (se comentarn en prcticas posteriores).

Puede encontrar ms detalles de esta versin en (http://www.eclipse.org/downloads/packages/eclipse-

ide-java-ee-developers/junosr2), la documentacin de uso en http://help.eclipse.org/juno/index.jsp, y

un listado de los plugins en http://marketplace.eclipse.org/.

Eclipse est realizado mayoritariamente en Java, por lo que necesita que haya disponible un JRE de

Java instalado.

La instalacin de Java tan solo requiere descomprimir un archivo comprimido y es posible llevarlo en

una memoria USB listo para ser ejecutado.

3.2.3.1 Workspace

Eclipse trabaja con proyectos y no suele utilizarse para trabajar con archivos sueltos. Adems los

proyectos se agrupan en espacios de trabajos (workspace). Un workspace es un directorio donde se

guardarn todos los proyectos y sus configuraciones.

Cuando se arranca eclipse, por defecto, preguntar por el workspace a utilizar (un usuario puede tener

varios y puede cambiar entre ellos en cualquier momento) a menos que se le indique que siempre use

el mismo por defecto. En estas prcticas, por defecto, se utilizar el directorio

/home/afast/workspace. A partir de ese momento, los proyectos creados se crearn en ese

directorio, y la configuracin tambin se guardar all.

Cuando se arranca eclipse por defecto, la apariencia que tiene es la siguiente:

TA

RE

AS

1 Inicie eclipse con el usuario afast:

eclipse &

2 Acepte el workspace que se le indica por defecto.



Los elementos que se identifican en el entorno (tambin conocido como workbench) son los

siguientes:

Barra de men (3).

Barra de herramientas (4). Totalmente personalizable.

Vistas (5), (6), (2). Son ventanas empotradas que muestran informacin variada (sobre el

proyecto, el fichero actual, informacin de servidores, etc.). Por ejemplo la vista 5, muestra el

explorador de proyectos del workspace actual. Aqu se mostraran todos los proyectos de este

workspace. Las vistas se pueden compactar en forma de pestaas, como se observa en la vista

7. En este caso, un conjunto de vistas ocupan un mismo espacio, y solo se puede mostrar una

en un determinado momento. Se pueden modificar las vistas abiertas en un determinado

momento y su posicin. Puede aadir nuevas vistas accediendo al men Window>Show

view

Editores (8). En la parte central (aunque no es necesario) se suelen mostrar los editores. En

estas ventanas es donde se muestran los ficheros abiertos. Si hay ms de uno se muestran en

pestaas.

Barra de perspectivas (1). La disposicin de vistas, editores, mens y barra de herramientas

forma lo que se denomina una perspectiva. Para cada tarea en la fase de creacin de

aplicaciones web nos interesa tener una disposicin u otra, con unas vistas visibles y otras no.

Eclipse permite definir mltiples perspectivas, de tal manera que podamos cambiar

1

2

3

4

5

6

7

8



rpidamente entre una y otra sin tener que volver a configurar de nuevo la disposicin de

todos los elementos del entorno. Para trabajar con perspectivas (abrir, modificar, cerrar,

resetear) utilice el men Window.

3.2.3.2 Instalacin de plugins

Si se desea aadir nueva funcionalidad a eclipse, o el soporte a nuevos lenguajes es necesario aadir

plugins. En la instalacin de eclipse de la mquina virtual se requieren permisos de root para aadir o

eliminar plugins.

TA

RE

AS

1 En eclipse, seleccione el men File>New>Other. Podr ver todos los tipos de

proyectos y ficheros que se pueden crear.

2 Seleccione dentro de la categora Web, Static Web Project y pulse Next.

Dele como nombre prueba y pulse Next. A continuacin pulse Finish. Acepte

el cambio de perspectiva.

3 Ahora en la barra de perspectivas, prueba a cambiar entre las dos que tendr disponible.

Comprobar que la disposicin cambia instantneamente.

4 Vaya ahora a la vista Project Explorer. Expanda el proyecto prueba hasta que

vea la carpeta WebContent. Pulse con el botn derecho del ratn sobre ella y

seleccione Import del men contextual. A continuacin, en la categora General

seleccione File System y pulse el botn Next. En el campo From

directory escriba /home/afast/webdemo. Seleccione index.html e

index.php y pulse el botn Finish.

5 Ahora en Project Explorer, en el proyecto prueba, en la carpeta WebContent deben

aparecer los dos nuevos ficheros. bralos haciendo doble click sobre ellos.

6 Un mismo fichero se puede abrir usando distintos editores. Pulse con el botn derecho, en

el fichero index.html en el explorador de proyectos. Y en el men contextual

seleccione Open with>Web Page Editor. Comprobar que ahora se abre el

fichero usando un editor distinto, que permite ver el resultado y el cdigo fuente

simultneamente.

7 Cree proyectos y ficheros de distintos tipos, pruebe a abrir distintas vistas. Observe el

contenido que se muestra en cada una de ellas. Explore tanto la barra de men, como los

mens contextuales que se muestran cuando se pulsa con el botn derecho del ratn en cada

elemento de eclipse.

8 Por ltimo cambie el workspace a otro directorio. Usando el men File>Switch

Workspace>Other. Una vez cambiado, vuelva al workspace original.



3.2.4 Netbeans

Netbeans comparte muchos aspectos de la arquitectura de eclipse. Igual que eclipse, est realizado en

Java y es multiplataforma. Tiene un ncleo central, llamado Plataforma Netbeans, que se puede

utilizar para crear nuevos IDE, y plugins que se le pueden agregar. Puede ver sus caractersticas en la

siguiente URL: http://netbeans.org/features/index.html y el listado de plugins en

http://plugins.netbeans.org/ .

Los workspaces de eclipse se denominan aqu Grupos de Proyectos y no existe el concepto

de perspectiva. Por lo dems, todo es bastante parecido.

TA

RE

AS

1 Cierre el eclipse si lo tiene abierto. Desde un terminal como usuario root, vuelva a

ejecutar eclipse.

2 Seleccione el men Help>Install New Software. En el campo Work with:

seleccione --All Available Sites--". Empezar un proceso de actualizacin que

puede llevar algn tiempo. Espere a que termine. Aparece un lista que le permite ver que

plugins puede instalar

3 Para ver lo que ya est instalado. Pinche en el enlace donde dice What is already

installed?

TA

RE

AS

(O

PC

ION

AL

)

1 Descargue el paquete de Netbeans para JavaEE de

http://netbeans.org/downloads/index.html Seleccione la versin para Linux, y en Espaol.

2 De permisos de ejecucin al archivo descargado y ejectelo desde un terminal (usuario

afast). Acepte la licencia y todas las opciones por defecto. Se crear un directorio en su

directorio de inicio de sesin llamado netbeans-X.Y, siendo X.Y la versin que se ha

descargado.

3 Ejecute Netbeans, accedianto al men del sistema

Aplicaciones>Programacin>Netbeans.

4 Cree un nuevo proyecto de HTML y explore el IDE.



4 Ejemplo de Test (5 minutos)

INSTRUCCIONES PARA LA REALIZACIN DEL TEST

I) NORMAS COMUNES (iguales a todos los Tests de la asignatura)

Los tests de cada prctica son Exmenes. El examen es INDIVIDUAL. Durante la realizacin del Test no deber hablar ni mirar la pantalla de otro compaero. El

incumplimiento de estas normas podr ser interpretado como un intento de copia por

parte del alumno, al que se le podr expulsar de la sala y aplicarle las sanciones

pertinentes.

Slo podrn realizar el tests los alumnos presentes en la clase en la que se lleve a cabo su realizacin. Cuando el profesor realice el control de la asistencia, deber

presentarle su DNI o documento de identificacin equivalente. Sitelo en lugar

visible.

Salvo por problemas sobrevenidos, se exigir que cada alumno asista, tanto para la clase como para la realizacin del Test, a la sala que tiene asignada conforme a su

subgrupo de prcticas.

La realizacin de los Test se har a travs de la Web de la Asignatura en Enseanza Virtual, mediante la pestaa Evaluaciones. Cuando llegue el momento de la realizacin del Test, el profesor le indicar que acceda a la plataforma y le

suministrar la clave necesaria para poder comenzar el Test.

Para garantizar una adecuada realizacin del examen, el profesor podr indicar una redistribucin de los alumnos en el aula.

Para permitir una adecuada organizacin, cuando el profesor anuncie el comienzo de la realizacin del Test, cada alumno deber abandonar cualquier tarea que est

haciendo con su equipo, acceder la Web de la Asignatura en Enseanza Virtual,

pestaa Evaluaciones, y comenzar el Test de la Asignatura, de modo que TODOS los alumnos comiencen el Test ms o menos simultneamente.

Una vez comenzado el Test, no se permitir la entrada de ningn alumno en la sala. Cuando finalice el Test, salga en silencio de la sala para no molestar a los dems

compaeros que siguen realizndolo.

Durante la realizacin del test deber mirar nicamente a su pantalla. Cualquier intento de mirar la pantalla de otro compaero, as como hablar con ste, podr ser

sancionado.

Durante los Tests, podr usar el ordenador (incluso Internet), as como usar la documentacin que estime oportuna, pero tenga en cuenta que la duracin de los

Tests es breve, por lo que si invierte un tiempo excesivo en buscar, probablemente



no tenga tiempo suficiente para terminar el Test.

Si durante la realizacin del examen tiene problemas con el tamao de la letra, recuerde que siempre puede agrandarla o achicarla mediante las opciones de

visualizacin de su Navegador, o mediante las pulsaciones Ctrl-[+] o Ctrl-[-] (siendo [+], [-] del teclado numrico).

Si lleva consigo un telfono mvil, desconctelo completamente.

II) NORMAS PARTICULARES DE CADA TEST (pueden variar de un Test a otro, revselas siempre)

El Test consta de 5 cuestiones, todas igualmente ponderadas ("2 puntos", sobre 10, por cuestin).

Cada cuestin presenta 3 opciones, de las cuales slo 1 de ellas es correcta.

La cuestin mal contestada descuenta 1/3 de una cuestin bien contestada, sobre el total del Test (una cuestin no contestada no puntuar, ni positiva ni negativamente).

Si obtuviese en el Test una calificacin negativa, se le computara como "0" puntos al sumarla con las dems pruebas de la asignatura (dems Tests de Prcticas y

Examen).

Si alguna pregunta del Test tuviese que ser anulada, su puntuacin sera distribuida entre las dems cuestiones del Test.

La adecuada interpretacin de las cuestiones planteadas en el examen forma parte del mismo (el profesor no responder a ninguna pregunta relativa a la interpretacin

de las cuestiones del Test).

III) PROCEDIMIENTO DE ENTREGA DEL TEST

Cuando termine el Test, asegrese de que ha pulsado el botn "Terminar".

Tras ello, levante la mano para que el profesor acuda a su puesto de trabajo y compruebe que todo est correcto.

Cuando el profesor se lo indique, salga de la sala en silencio.

NOTA: Estas Instrucciones sern referenciadas cuando comience el Test. Se le presentan

aqu para que no necesite invertir tiempo del examen en su lectura.



1) La lgica o capa de negocio (parte interpretada en el servidor) de una aplicacin web::

a) Interpreta las consultas del cliente.

b) Se comunica con la capa de almacenamiento de datos.

c) Todas las respuestas son ciertas.

2) El workspace de Eclipse:

a) Es la localizacin fsica donde se almacenan los proyectos, carpetas y ficheros creados con el

Workbench.

b) Slo es posible elegirlo durante el inicio de Eclipse.

c) Es un directorio del sistema definido durante la instalacin de Eclipse.

3) Un servidor web ha de escuchar siempre por el puerto 80:

a) No, tambin puede escuchar por el puerto 443.

b) Siempre que el protocolo de comunicacin sea HTTP.

c) El puerto 80 es el puerto por defecto, pero es modificable.

4) Tras la instalacin de Eclipse, es posible aadir aplicaciones accesorias para desarrollar en otros

lenguajes distintos a Java mediante la adicin de:

a) perspectivas.

b) plugins.

c) workspaces.

5) Es posible integrar mltiples lenguajes de programacin en un mismo cdigo de una pgina web::

a) Verdadero.

b) Falso.

c) Siempre que todos sean interpretados en el lado del cliente o todos interpretados en el lado del

servidor.



Cuestin 1 2 3 4 5

Solucin (c) (a) (c) (b) (a)

APAGUE EL EQUIPO

Cuando finalice la prctica no olvide apagar el equipo. Para ello:

1 Apague el "equipo" de la mquina Linux Debian, bien desde la opcin "Apagar" del escritorio

KDE o Gnome, o bien mediante el comando "poweroff".

2 Una vez en el sistema real desde el que entr en la mquina virtual, apague finalmente el

ordenador usando la opcin "Apagar".

Documents

t4 Practica