t4 practica
Post on 11-Sep-2015
230 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -2- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -3- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -4- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -5- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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)
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -6- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -7- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -8- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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).
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -9- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -10- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -11- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -12- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -13- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -14- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -15- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -16- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -17- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -18- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -19- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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.
-
BLOQUE II: PROGRAMACIN WEB PRCTICA 4: INTRODUCCIN A LA PROGRAMACIN WEB
FUNDAMENTOS DE APLICACIONES Y SERVICIOS TELEMTICOS -20- DEPARTAMENTO DE INGENIERA TELEMTICA (DIT)
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".
top related